Hi,
my product pages are zoomed in with no border. They used to have a border but it randomly changed a while ago. Link is attached showing what I mean. I want it back to normal as it looks too crammed in now. Only occurs on mobile view
Topic summary
A Shopify store owner reports that product pages appear zoomed in on mobile devices without borders, creating a cramped appearance. This issue started occurring unexpectedly after previously displaying normally.
Two solutions were proposed:
-
Remove problematic code: Navigate to theme.scss file and delete specific code at the bottom that’s removing website margins and causing the zoomed appearance.
-
Add corrective CSS: Insert custom CSS code in theme.scss.css targeting the product template with padding adjustments (22px left/right) for screens under 749px width.
Both solutions involve editing the theme.scss file through Online Store → Theme → Edit code → Assets. Screenshots were provided showing the exact code to modify. The issue appears to be CSS-related, affecting only mobile viewport rendering.
-
Go to the file theme.scss and scroll all the way to the bottom;
-
Delete this piece of code:
This is essentially removing all margins of your website and making it look zoomed in.
Kind regards,
Diego
1 Like
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Add this CSS at the bottom
Online Store ->Theme ->Edit code
Assets ->theme.scss.css
@media only screen and (max-width: 749px) {
.template-product .main-content {
padding-left: 22px !important;
padding-right: 22px !important;
}
}
Hope you find my answer helpful!
Best regards,
Victor | PageFly
1 Like