Before
After
💡
Purpose:
This CSS code is designed to alter the width and z-index of the Groundhogg social proof popup on the website. Specifically, it sets the width of the popup to 570 pixels and increases the z-index value to 99999 to ensure that the popup always appears above other page elements.
🗺️
Location:
This CSS snippet can be added in any of the following two ways:
CSS Snippet Plugin: If you're using a CSS snippet plugin, you can insert the code directly there. Follow the plugin's instructions for adding a new CSS snippet.
WordPress Customizer's "Additional CSS" section: Go to your WordPress dashboard, navigate to "Appearance" > "Customize". In the Customizer sidebar, select "Additional CSS". Add the CSS code in the text area and click "Publish" to save and activate the changes.
/* Des: This CSS adjusts Groundhogg social proof popup's width and ensures it always appears in front of all other elements */
#groundhogg-proof {
width:570px!important;
z-index:99999!important;
}
/* completed */
⭐
Special Notes:
The pixel value for the width is currently set to 570px. If you want to change the width of the popup, simply adjust this pixel value according to your specific design requirements.
The z-index:99999!important; is used to manage the layering of the popup. A higher z-index value means the element will appear above others on the webpage. In this case, the value of 99999 is extremely high, ensuring that the Groundhogg popup will appear above all other elements on your webpage, even those with a defined z-index. Be careful with this rule, as it can sometimes cause elements to layer in unexpected ways.
Always remember to clear your site's cache after making changes to CSS files to ensure the changes take effect.
Great Info