A user encountered a layout issue in their Shopify store’s email sign-up section where input containers weren’t extending to match the text width on screens between 560px and 749px wide. The containers displayed correctly at 750px+ but appeared misaligned on smaller viewports.
Resolution:
A CSS solution was provided targeting the specific viewport range:
#contact_form, #ContactFooter, and their child elementsOutcome:
The solution successfully resolved the alignment issue, making the containers span the full width to match the text. The user confirmed the fix worked.
Note: The thread was initially posted as a duplicate, which was pointed out by another community member.
Hey, how can I extend the containers so that they go all the way to the end of the text? From a width of 750+px, it works normally, so I need to fix it from a width 560px to 749px so that the containers are the same width as the text.
See the image below:
Here’s my store: https://1049xn-ya.myshopify.com/
(Just scroll all the way down, there is the email sign-up section.)
Thanks,
Tim
Don’t make duplicates
Which is duplicate of a
Don’t try to monopolize attention wait for contribution or make better posts.
Oh sorry, didn’t know that
Hi @CreatorTim
To complete your requests, please follow these steps:
@media screen and (max-width: 749px){
#contact_form, #ContactFooter, #ContactFooter > .newsletter-form__field-wrapper, #contact_form > .newsletter-form__field-wrapper {
max-width: unset !important;
}
}
Here is the result:
I hope this helps
Best,
Daisy
Thanks man!
