Hello,
On mobile, when going to my web address, it appears completely zoomed out. You are able to scroll to the right way more than it should allow. I have attached an image for context.
Please let me know if there is a fix?
Thank you
Topic summary
A Shopify store owner reported their website appearing completely zoomed out on mobile devices, with excessive horizontal scrolling. They provided a screenshot demonstrating the issue on skatersedgecanada.com.
Root Cause:
The problem was traced to CSS positioning in the footer section causing layout overflow on mobile viewports.
Solution Provided:
A CSS fix was shared targeting screens under 749px width:
- Add media query to
base.cssfile - Reset positioning for the copyright content element in the footer section
- Use
position: relativeandleft: 0with!importantflags
Resolution:
The original poster confirmed the fix worked successfully. The issue is now resolved.
@skatersweb Can you please share this page link?
Do you have any idea what may be causing this?
@skatersweb please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
@media screen and (max-width:749px){
#shopify-section-sections--23002194608438__footer .copyright__content:nth-child(2) {
position: relative !important; left: 0 !important;}
}
Thank you very much!