Website on mobile

Store Design
, , , , ,

Topic summary

A user is experiencing a mobile viewport issue where their website appears zoomed in on initial load, allowing unwanted horizontal scrolling. After manually zooming out, the site displays correctly but loses vertical scrolling functionality.

Suspected Cause:
The issue may stem from custom CSS used to reposition the hamburger menu and cart icon further apart on mobile devices.

Proposed Solution:
A helper suggested implementing several CSS fixes:

  • Verify proper viewport meta tag configuration
  • Add overflow-x: hidden to html/body elements
  • Ensure images/videos have max-width: 100%
  • Apply the CSS to theme.scss or base.css files

Current Status:
The overflow fix partially works but creates a new problem: an unwanted button outline appears on the password-protected page. Additional CSS was provided to remove underlines from the password entry link. The discussion remains ongoing as the user works through implementation issues with the suggested code.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
3

thanks for your reply!

where do i paste this in the codes?

and also i maybe found the problem that caused this..

I relocated my hamburger and cart icon to be further apart.

i deleted this now but i still want them to be more to the edge..

maybe there is a solution?

here is the code i used:

@media(max-width:989px){
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    padding-left: 11px !important;
    padding-right: 11px !important;
}
.header__icons {
    padding-right: 0 !important;
}
}