How to reduce header margin/padding on mobile?

Solved
Camille_AA
New Member
2 0 0

Hello all,

I am currently using the Supply theme - my shop (in French) can be found at the following address: https://assiettes-anciennes.fr/

I have just added my logo and I am happy with the way thing look on desktop, but on mobile the header is too big.
I would like to reduce the top and bottom margin (or padding?) to reduce the size of the header, on the mobile version only (see printscreens below)

I have checked the CSS code but haven't found where to change this - but I'm not very good with code...

Thank you very much for your help!

Camille

Desktop - happy with itDesktop - happy with itMobile - Header feels to largeMobile - Header feels to large

0 Likes

This is an accepted solution.

@media only screen and (max-width: 768px) {
h1.header-logo {
    margin: 0;
    padding: 0;
}
header.site-header {
    padding: 0;
}
}

Hi,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Camille_AA
New Member
2 0 0

Thanks!

Seems to have worked nicely.

Thank you again for a very quick and efficient response.

Camille

0 Likes
Kade
Tourist
8 0 2

Hi, 

Thank you for the code!

This has helped, however I still have white space below the logo. Please could you assist.

Screenshot_20210513-123408_Chrome.jpg

0 Likes

Hello Kade,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss

@media screen and (max-width: 768px){
.main-content {
    padding-top: 0px !important;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes