Mobile display Banner issues

New Member
5 0 0

Hi, I have an issue that I have been breaking my head on last few days.

I have a hero banner on my collections, but it is too close to the header. 

How do I add a bit of white space between the header and the hero banner in collections? 

I'm using brooklyn theme

See picture:

0 Likes
Highlighted
Shopify Staff
Shopify Staff
588 55 117

Hey there, Cedric!

Bo here from Shopify Support.

That is a really great question. Adding white space between the hero image and the header in the collection page will require some custom coding, we can do so by adding a rule to the theme.scss.liquid file.

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code

  • Go to Online Store > Actions > Edit Code.
  • Open Assets > theme.liquid.scss.
  • Scroll to the bottom of this file and add the following code:
@include at-query($max, $medium) {
.collection.header {
    padding-top: 40px;
}
}
  • This code will change the padding in the mobile version of the site. If you wanted to change the padding for both the mobile and the desktop versions you will add the following code instead:
.collection-hero {
padding-top: 40px;
}
  • The amount of padding is controlled by the quantity of px, if you would like less padding you can change 40px to a lower number if you would like more you can increase the number.
  • Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,
Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
5 0 0

Solution works perfect!

Only had to change header into hero for the mobile version but it did the job!

Greatly appreciated man!

 

have a wonderful day :)

0 Likes