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.
Website is: musclearning.com
Hi @shele1 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
I agree with BSSCommerce-HDL solution. I just updated the style slightly.
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.
Open the file layout/theme.liquid.
Add the following snippet before in it.
That’s it.
Hm, for some reasons it’s not working. It might be because I already did some changes on the desktop header padding in the past?
This is the code I used for desktop to fix padding. At the bottom of base.css file:
@media (min-width:990px){
.header {
padding-top: 0px;
padding-bottom: 0px;
max-width: 100%;
padding-left: 3px;
padding-right: 3px;
}
It should work if the code is added in layout/theme.liquid file.
By the way, I can’t find the code added in the live website code.
Could you please add the snippet and let me know so that I can check the reason?
Figured it out. I was using third party app for editing the design of the store and that’s where I should have putted it. The code works!
Yes, I checked the site, and it seems working. 
And if it is helpful, please approve the solution.
