In this article, we will cover the difference between the <div> of the CMP message and the CMP message itself, and how to edit the styling/size of the former.
<div> element vs message
<div> of the CMP message should not be confused with the CMP message itself. The
<div> of the CMP message is a container on your page that holds the CMP message (which is the content).
This distinction is important because any styling/sizing done within Sourcepoint's message builders will change the CMP message itself but not the
<div> of the CMP message.
Currently, it is not possible to edit the
<div> of a CMP message from Sourcepoint's message builders since it is produced via the Sourcepoint script on your page. In order to edit the
<div> of the CMP message, you will need to apply styling to the page's CSS file.
Your organization has created a GDPR TCF first layer message using the Bottom message type. Additionally, you have implemented custom CSS in the first layer message builder to constrict the message by a pre-determined number of pixels.
The result is a first layer message that will load and stay fixed in the lower left-hand corner of the page for the end-user
Despite the message being sized into the lower left-hand of the page, the
<div> width of the message is still set at 100% which means the area of the page to the immediate right of the message is covered and any links there are un-clickable.
In order to make interactions to the right of the message possible, we will need to apply styling to the
<div> width of the message.
Apply styling to CMP message
Add the following into your page's CSS file with a new width (in px) and any additional stylings you wish to apply to the CMP message's
/* cmp div */
width: 510px !important;
Note: Since the actual
<div> id of the CMP message can slightly change based on the id of the message, we use the
[attribute^=value] selector to set the styling of any
<div> that begins with
<div> of the CMP message will conform to the stylings applied in your CSS file.