Can't close a simple gap in CSS somehow on mobile view, should be easy

Store Design
1

Hey basically what is bothering me is some gaps on mobile views. I am learning CSS but I somehow can’t make it work

MDKSocks_0-1633086497648.jpeg
MDKSocks_0-1633086497648.jpeg180×400 11.9 KB

MDKSocks_1-1633086497650.jpeg
MDKSocks_1-1633086497650.jpeg180×400 13.8 KB

Both you see 2 screenshots on collection leven and product level. In both occassions I want gap 2 to be equally in height to gap 1. So Basically the same on both pages… Does anyone know the trick?

2

If you only want to apply it to collection page you use the template-collection class which is on the body element, for example:

@media screen and (max-width: 700px) { 
  .template-collection header.site-header {
    margin-top: 1em; 
  }
}

Will apply a margin-top of 1em, only on mobile, and only on collections.

3

hello @MDKSocks

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 700px) { 
  .template-collection header.site-header ,  .template-product header.site-header  {
    margin-top: 10px; 
  }
}
4

Hey @Kinjaldavra and @iDoThemes

Both solutions made the gap above the logo bigger instead of making the gap below the logo smaller? You basically did it the other way around.. I think you misunderstood me but that is fine!

Change it to margin-bottom maybe?

5

@Kinjaldavra I tried Margin-bottom but that didn’t work :disappointed_face:

6

I did it with margin-bottom -20px

Is that legit or could I better not do it like this? The endresult looks great!

@Kinjaldavra @iDoThemes