Hi!
Somehow my mobile view for forms does not have padding at all. I’d like it to have some space on the left and right for mobile view, if someone could please help! 
Shopify URL: https://65a186-44.myshopify.com/
Password: meerew
Topic summary
A user encountered an issue where contact forms on their Shopify store lacked padding on mobile devices, causing the form fields to extend edge-to-edge without spacing.
Multiple Solutions Offered:
Several community members provided CSS-based fixes, primarily involving:
- Adding custom CSS code to
theme.liquid(before the</body>tag) - Modifying
base.cssor similar stylesheet files - Using the theme customizer’s “Custom CSS” field within the Contact Form section
Most solutions used media queries targeting mobile viewports (max-width: 767px or 749px) to add left/right padding to form elements.
Initial Challenge:
The user noted that early solutions only fixed one specific form rather than applying globally across all forms on the website.
Resolution:
One respondent (Dan-From-Ryviu) provided a solution that successfully addressed all forms site-wide. The user confirmed this approach “worked perfectly” and marked it as the accepted solution.
The discussion demonstrates typical Shopify theme customization workflow: identifying the correct file (theme.liquid or CSS files), adding targeted CSS with appropriate selectors, and testing across different form pages.
Hey @letsgetwasted
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @letsgetwasted
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi @letsgetwasted ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
@media only screen and (max-width: 749px) {
.contact.page-width {
width: 90%;
}
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Hello! This nearly works, but it only fixes one of the forms - how can I apply this to all forms on my website, across all pages, not just a specific one please?
@letsgetwasted Please follow below steps to set padding for form. Let me know whether it is helpful for you.
- From admin go to “Online Store” → “Themes”.
- Click “Customize” button from the current theme.
- Click “Contact Form”.
- Paste the below code in the “Custom CSS” field and save changes.
NOTE: You can increase/decrease the padding as per your need.
.contact {
padding-left: 15px;
padding-right: 15px;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Please follow the below step
-
Go to the Online Store → Themes → Edit Code
-
Find theme.liquid file.
-
Add the style code before like this:
Hello @letsgetwasted
Go to online store ---------> themes --------------> actions ------> edit code-------> base.css------> line number 83
and add this code
.page-width {
margin: 0 auto;
}
let me know if this solves the purpose on all the forms
Thanks
This worked perfectly, thank you so much!
1 Like
Very welcome!