Dawn theme horizontal scroll hide - urgent

[Sivadarshan]

In my Dawn theme website, there is some horizontal scrolling in mobile view. Please anyone help me to sort out this.

website: Amber By Deviriti

password: amber

[Moeed]

Hey @Sivadarshan

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (max-width: 767px) {
html, body {
    overflow-x: hidden !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Hamtechy]

Horizontal scrolling on mobile usually happens when some element is wider than the viewport (like an image, section, or custom code that’s breaking out of the container

[MaksymKurniy]

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find base.css file

4. find .search-modal__form .field__label and .newsletter-form__field-wrapper .field__label

5. replace width: 100%; to width: auto;

[MaksymKurniy]

This is a bad decision that doesn’t solve the potential problem.

[Webcrafter]

@media screen and (max-width: 767px) { html, body { overflow-x: hidden !important; } }

can negatively affect other sections of your website because it applies globally to the entire site or theme. This means that any horizontal scrolling — even for sections that are intentionally scrollable — will be disabled, potentially breaking sliders, carousels, or other horizontally scrollable elements on your website.

To avoid this, it’s better to apply overflow-x: hidden only to specific sections or containers instead of globally to html or body.