How to remove padding between announcement bar and logo and slideshow on mobile (Supply Theme)

Store Design
1

Hi there,

I am wanting to remove space between 1) announcement bar and logo, and 2) logo and slideshow on the homepage of my website on mobile. Using Supply theme, my website URL is: https://madeinthestates.com.au/

Screenshot 2022-07-11 154723.jpg
Screenshot 2022-07-11 154723.jpg758×1118 98 KB

I’d greatly appreciate your help!

2

Please add below css code in bottom of theme.scss.css file

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

margin: 10px auto;

}

Thank you.

3

Hi ,

Add below CSS in theme.css file

@media only screen and (max-width: 767px){
  header.site-header{padding:0px !important}
  .header-logo{margin:0px !important}
}

Hit Like and Accept as Solution

4

Hey @madeinthestates ,
Welcome to the Shopify community!
You can follow the instruction below:

@media only screen and (max-width: 767px){
  header.site-header{padding:0px !important}
  .header-logo{margin:0px !important}
}

please add this to your CSS file. If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman