Issue with containers

Store Design
, , , , , , , ,

Topic summary

A Shopify store owner encountered a text alignment issue in newsletter signup containers. When users clicked and typed in the email input fields, the text positioned too high and overlapped with the container heading.

Problem Areas:

  • Email sign-up section
  • Footer newsletter section

Working Reference:
The login page containers displayed correctly with proper text positioning.

Solution Provided:
A CSS fix was suggested targeting the newsletter form input with custom padding:

#contact_form > .newsletter-form__field-wrapper input {
   padding: 2.2rem 1.5rem 0.8rem 2rem
}

Resolution:
The original poster successfully applied the CSS solution to both problematic containers, adapting the code for the footer element using a more specific selector (input#NewsletterForm--sections--22711084187913__footer.field__input). Issue resolved.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I have an issue with the containers in the newsletter section. Everywhere else the containers are working fine (Login pages, search bar, contact section, etc.).

But in the email sign-up section and then in the footer, where the newsletter sign-up is, it’s bugging. Specifically, when I click on it and start typing, the text is too high, so it overlaps with the container heading, and it’s basically bugging.

I want to fix the text down, like it is in the contact section and everywhere else.

You can see how it bugs here: https://1049xn-ya.myshopify.com/
(Just scroll all the way down, it’s there)

And I want it to work like these containers: https://1049xn-ya.myshopify.com/account/login

So, for those 3 containers, in the email sign-up section and the newsletter section, I want to fix the text, just like in the login section.

Thanks a lot,
Tim

2

hi @CreatorTim ,

I am from Mageplaza - Shopify solution expert.

Here is the solution for your issue:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
#contact_form > .newsletter-form__field-wrapper input {
   padding: 2.2rem 1.5rem 0.8rem 2rem
}​

  • Save Your Changes:

    • Click the Save button after adding your custom styles.

Here is the result:

mageplazacs_0-1736137379129.png
mageplazacs_0-1736137379129.png1320×931 73.3 KB

I hope this is helpful to you!

Best regards.

1 Like
3

Hey, thanks so much, it works! But I’d like to add it to the last container in the footer as well.

Snímek obrazovky 2025-01-06 153410.png
Snímek obrazovky 2025-01-06 153410.png1066×462 25.8 KB

Thanks, I really appreciate your help.
Tim

4

Hi @CreatorTim ,

As I saw from your page, the last container in the footer is not working correctly as expected because it is using the same class as the newsletter section. Could you clarify how it should be displayed? :slightly_smiling_face:

mageplazacs_1-1736217231780.png
mageplazacs_1-1736217231780.png1920×933 265 KB

Best regards !

1 Like
5

Hey, thanks for the feedback, but I’ve already fixed it with this code:

input#NewsletterForm–sections–22711084187913__footer.field__input {
padding: 2.2rem 1.5rem 0.8rem 2rem;

}

It’s practically your code, so I’ve already accepted it as the solution.

Thank you man, appreciate your help!

1 Like