Hello,
I manage thebukshop.com store. Recently the header section widened so there is a horizontal scroll. I am using a second image for the mobile view.
Please see attached screenshot and thanks in advance for your help.
Best,
Mike
Topic summary
A store owner reported that their header section was causing horizontal scrolling on mobile devices, despite using a separate mobile image. The issue stemmed from the header width exceeding the viewport on smaller screens.
Solutions Provided:
Multiple community members offered CSS fixes targeting the header’s minimum width on mobile:
- Adding
min-width: 100%to.section-header .headerfor screens under 749px - Setting
min-width: 100% !importanton the specific header element for screens under 750px - Using
min-width: unseton.header-wrapper .headerfor screens under 989px
All solutions involved adding CSS code to the theme’s base.css file via Shopify Admin → Online Store → Theme → Edit code.
Resolution:
The issue was successfully resolved after the store owner implemented one of the suggested CSS fixes.
1 Like
@BukShop 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)
{.section-header .header{min-width: 100%;}}
1 Like
Hi @BukShop
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media screen and (max-width: 750px) {
header.header.header--top-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-localizations {
min-width: 100% !important;
}
}
Result
Best,
DaisyVo
1 Like
Hi @BukShop
I see the issue on your site, you can follow this way to fix it.
let try to add Custom CSS to your Theme Settings:
@media screen and (max-width: 989px) {
.header-wrapper .header {
min-width: unset;
}
}
The result will be:
1 Like
That worked, thank you!