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
The <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.
Use case
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 <div>
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 <div>:
/* cmp div */
[id^="sp_message_container"] {
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 sp_message_container.
The <div> of the CMP message will conform to the stylings applied in your CSS file.
Comments
0 comments