Reduce Header Padding Mobile

[shele1]

Hello everyone. I want to reduce the padding on right and left sides on header on mobile only. On header.

Is it possible? If so, how?

Here are some photos for reference:

1. How my header looks now:


2. How I want it to look:


Hopefully you see what I mean. I want the left and right edges to shorten them. Decrease the padding on left and right.

Thanks.

[devcoders]

Hi @shele1
If you share your store URL and password with me, I will check and provide you with the solution.

[BSSCommerce-B2B]

Hi @shele1
This is quite simple, but since you haven’t shared the website URL, I haven’t been able to identify the elements containing the menu, logo, and shopping cart. However, if you can identify those elements yourself, here is the guide.

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.css, base.css or global.css and add this code snippet to the end of the file

@media screen and (max-width: 750px) {
    selector {
        margin-left: 5px;
        margin-right: 5px;
    }
}

[shele1]

I tried the code however it didn’t work. Here is the link to the store: musclearning.com so you can get a deeper dive.

[shele1]

Here is the link to the store: musclearning.com

[BSSCommerce-B2B]

Hi @shele1

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file base.css and add this code snippet to the end of the file

@media screen and (max-width: 750px) {
.header {
    padding: 0px 1.5rem 0px 1.5rem !important;
}
}

Result

If it helps you, please like and mark it as the solution.

Best Regards