Website on mobile

[LeandroS]

Hello

I have a problem with my website on mobile view..

It seems like my website is slightly zoomed in when loading the page.

due to this, i can scroll horizontally and the whole website scrolls too..

when i then zoom out i can no longer do the vertical scrolling and looks perfect.

is there a way to fix the mobile website so there will be no horizontal scrolling?

I will attach pictures and a video

really need help now.. website will be going live tomorrow...

Website: www.gogghi.ch

password: GOGGHI10NEWWEBSITE2025

thanks!!

VIDEO for reference:

https://vimeo.com/1049279459 

Screenshoots:

[Ahmad31]

Hi @LeandroS 
This issue occurs when an element on your website exceeds the viewport width, causing a horizontal scroll and giving the appearance of a zoomed-in page. Here's how you can fix it:

Steps to Fix the Issue

1. Set the Correct Viewport Meta Tag

Ensure your viewport meta tag is properly configured in your theme’s head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Prevent Horizontal Overflow

Add this CSS to prevent elements from exceeding the viewport width:

/* Prevent horizontal overflow */
html, body {
  width: 100%;
  overflow-x: hidden;
}

3. Fix Problematic Elements

Some elements might unintentionally cause the overflow. Use the browser developer tools to inspect and fix them:

• Wide Images or Videos:

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

5. Force Layout Adjustments

If necessary, you can force the layout to adjust dynamically:

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

[LeandroS]

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;
}
}

[Ahmad31]

You can paste it in file named as theme.scss or base.css

[LeandroS]

It works but on my password site there is a button outline that appears..

[Ahmad31]

@LeandroS you want like this, if yes then paste this css to remove uderline from Enter Using Password:

.password-link.underlined-link {
  text-decoration-line: none;
}

[LeandroS]

when i paste this code from you this happens in the password page:

/* Prevent horizontal overflow */
html, body {
  width: 100%;
  overflow-x: hidden;
}