Help with CSS Styling for Shopify Forms Teaser

[tholland]

I'm having difficulty targeting and styling the Shopify forms teaser that appears when the Shopify forms is closed out of. This is the teaser text that displays along the bottom of the page. All attempts to target and style with CSS don't seem to be working. I am looking to simply reduce the size of the text, change the background color,  and add a border around the teaser. 

My website is https://exbestia.com/

I greatly appreciate any help!

[devcoders]

Hello @tholland 
Please share the page URL so I can check and update you.

[tholland]

hello, my website URL is https://exbestia.com/

Thank you!

[Promer-Alena]

To customize the Shopify Forms teaser on your site, you can add custom CSS to your theme. Here's how:

1. From your Shopify admin, navigate to Online Store > Themes.

2, Click Customize for your active theme.

3. In the theme editor, select Theme settings, then Custom CSS.

4. Add the following CSS code:

.shopify-form-teaser {
background-color: #f0f0f0; /* Replace with your desired background color */
color: #333; /* Replace with your desired text color */
border: 1px solid #ccc; /* Adjust border color as needed */
padding: 10px; /* Adjust padding for spacing */
font-size: 14px; /* Adjust font size as needed */
}

5. Click save to apply the changes.

If your theme doesn't have a Custom CSS option, you can add the CSS directly to your theme's stylesheet:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code for your active theme.
3. In the Assets folder, locate your main CSS file (commonly named theme.css, styles.css, or similar).
4. Add the CSS code provided above at the end of this file.
5. Click save to apply the changes.

[tholland]

unfortunately that does not seem to work when placed either in the custom CSS section or base CSS file.