Mobile layout of a new submission page appears overly narrow, with gray side margins squeezing the content. Desktop view looks fine. The goal is to remove the gray area on mobile and let content extend to the screen edges. A screenshot is provided to illustrate the cramped mobile view, and the live page link is shared.
Proposed fix: add a CSS media query for small screens (max-width 768px) targeting the page container (.pageTemplate) to set margin: 0 and padding: 0 using !important. Steps: open the theme code editor, locate generic.css, paste the rule at the bottom, and save. This aims to eliminate mobile side spacing.
Current status: a specific solution was provided, but no confirmation yet that it resolves the issue. Discussion remains open pending the result of applying the CSS change.
Hi all,
We’re setting up a new page with submission forms on our site. In desktop view this looks good, however in mobile view it is way too cramped and squeezed in from the sides. I’ve tried looking in the CSS files to no avail, but I’d like to get rid of the grey area in mobile view and move the content all the way to the edges. Any ideas?
https://ironlioncollectibles.com/pages/consignment
Thanks!
Hi @ilion23
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file generic.css
Step 3: Paste the below code at bottom of the file → Save
@media only screen and (max-width: 768px){
.pageTemplate {
margin: 0 !important;
padding: 0 !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
