I’m using horizon theme in that I want to remove the horizontal scroll happening in mobile view. Is there any way to remove that.
website: https://bercaan.myshopify.com/
pw: fds1
Do not do this – it will break your sticky header.
Rather do this:
You have this section with hotspots – see how popup extends beyond the right border:
First step is to ensure that it does not affect entire site – go to this section settings → “Custom CSS” and paste this code:
{
overflow:hidden;
}
Then let’s try to reposition this popup – add this code:
[class*=ai-hotspot-wrapper]> div:last-child > [class*=ai-hotspot-popup] {
transform: translateX(-65%);
}
This should make it look this:
.section.section--page-width.color-scheme-af981dc4-3b00-4875-844e-6806dda2415e {
overflow: hidden;
}
just paste this code it will be fixed
you can also used media query
@media(max-width: 768px) {
.section.section--page-width.color-scheme-af981dc4-3b00-4875-844e-6806dda2415e {
overflow: hidden;
}
}
Hi @siva_fds
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > style.css and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
html,
body {
width: 100%;
overflow-x: hidden;
}
}
did you tried this ?
@siva_fds Hey, I saw your screenshot. You have turned on the customization page, that’s why you don’t see the correct layout. Try opening the preview page so you can see that there is no double vertical scrollbar or horizontal scrollbar.
Thanks…
@siva_fds I checked on my mob and PC everywhere, but everything is fine and scroll bar is fixed so don’t worry.
Hi @siva_fds,
I just checked your store on mobile view, and it looks like the issue is already resolved. I tested the page, and there is no horizontal scroll happening anymore—everything stays perfectly contained within the screen width.
If you are still seeing it on your end, try clearing your browser cache or testing it in an Incognito/Private window.
Everything looks great from here!