How to reduce header margin/padding on mobile only?

Store Design
, , ,
1

Hello all,

I am currently using the Dawn theme

I would like to reduce the bottom margin (or padding?) to reduce the size of the header, on the mobile version only.(reduce the bottom white portion beneath)

I have checked the CSS code but haven’t found a fix till now - I’m not very good with code…

Thank you very much for your help!

Shreyan.

Shreyan_0-1729815305329.png
Shreyan_0-1729815305329.png585×384 170 KB

2

Hi, @Shreyan

Can you please share your store url so that I can assist you?

3

Hi @Shreyan ,

Please send the website link, I will check it for you

4

Hi Shreyan,

Please share the preview link and we can solve this issue quickly

5

Here is the preview link- https://1sszytfmyf2vtln5-83195527451.shopifypreview.com

6

Here is the preview link- https://1sszytfmyf2vtln5-83195527451.shopifypreview.com

7

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

AnneLuo_0-1729824048392.png
AnneLuo_0-1729824048392.png467×997 30.6 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

8

Hi @Shreyan ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.header-wrapper {
    height: auto !important;
}
.header {
    padding: 10px 3rem 10px 3rem !important;
}
}
9

Hello @Shreyan

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width:992px){
.header-wrapper {
height: 80px !important;
}
}
10

Hello @Shreyan
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.header-wrapper {
height: 75px !important;
}

result

32.png
32.png459×591 191 KB

If this was helpful, hit the like button and accept the solution.
Thanks

11

Hi @Shreyan ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!