Target email form with CSS

[nboote]

Hello,

How do I target the form in this slider to give it a minimum width?

http://natashaboote.com/soften/

I know the CSS to use but I’m unsure how to target this specific element.

Thanks!

[ruenel]

Hello @NBoote,

Thanks for writing in!

To increase the form width, simply add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

#tco-section-1{
    min-width: 300px;
}

Feel free to increase the width if needed.

[nboote]

Thank you!

I guess i’m just curious why #tco-section-1 refers to that email form element?

[nabeel]

Hi again,

If you’re referring to this form (see screenshot)

Then the provided ID #tco-section-1 is for that element or you can use this ID as well tco-subscribe-form-1674 to target that form which is more specific to that form on that page. To learn more about finding out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[nboote]

Thank you!

[nabeel]

You’re most welcome!