How can I resize and change the color of my newsletter form fields?

Topic summary

Issue: After adding a “Prénom” field to the Shopify newsletter form, the “Courriel” field became partially hidden. The requester wanted both fields the same size and asked about changing the font color.

Solution proposed and applied:

  • Navigate: Online Store → Themes → Edit code → Assets.
  • Edit the theme CSS file (base.css/style.css/theme.css).
  • Add a rule targeting .newsletter__input-group to make inputs full width:
    • Either: max-width: 100% !important; or width: 100% !important.

Outcome: The sizing fix was confirmed to work by the requester. An image was shared to demonstrate the result.

Open point: No specific guidance was provided on changing the font color; that part of the request remains unaddressed.

Status: Resolved for field sizing; font color change still open.

Summarized with AI on January 15. AI used: gpt-5.

Hi!

I just add a ‘‘Prénom’’ field in my newsletter form. But now the ‘‘Courriel’’ field is a little bit hidden. How can I resize it, I want it to be as big as the other field? And the color of the font is not the same… is it possible to change it too?

Website : https://bougon-liquidation.myshopify.com/

Bougon123

You can see it in the menu ‘‘Magasiner en ligne’’.

Thank you!

1 Like

Hi @Liquidaprix

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.newsletter__input-group {
    max-width: 100% !important;
}

Hi @Liquidaprix

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.newsletter__input-group {
    width: 100% !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Thanks a lot it works!

1 Like