Header Blowing Out in Mobile View

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

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!