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. 



Was this article helpful?
1 out of 1 found this helpful



Article is closed for comments.