Hello dear community!
I would like to change the padding of the header icons in my shopify store - https://maisonmagdalena.com/ (Password - MaisonMagdalena.222)
I can go to inspect and manually adjust the margins as you can see on the screenshots below - I would like to go from “4px 3rem 4px 3rem” to “0px 1rem 0px 1rem” I just don’t know where to adjust this in the code.
Thanks for your help 
1 Like
Hi @MagdalenaBB
You can find this code to the theme.liquid or header.liquid on the Section Folder. But base in your SS you only like to change into the mobile screen? And also the code that your changing to is not Icons its the whole padding of the header.

Do you like to make it like this?
if that so you can check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
/* header padding */
@media only screen and (max-width: 767px){
.header {
padding: 0px 1rem 0px 1rem !important;
}
}
And Save.
I add some comment so if you like to change again soon you can remember the code.
1 Like
Thank you a lot! It worked.
How can I do it for the desktop view, too?
You can used this code.
Same Instruction.
.header:not(.drawer-menu).page-width {
padding: 0px 1rem 0px 1rem;
}
And Save.
Q; Do you like to make your header wider? There is a default width size which is 120rem.
If you like to max-wdith the result is like this.
Just add the max-wdith;
Like this.
.header:not(.drawer-menu).page-width {
padding: 0px 1rem 0px 1rem;
max-width: 100%;
}
And Save.
1 Like