Padding between image banner and collection list

Store Design
,
1

Hi, please can someone help me? i need to smaller the padding between the image banner and the collection list on my homepage. The padding should be same as between the collections in the collection list.

taneau.com (ride theme)

IMG_8362.jpeg
IMG_8362.jpeg1170×2532 140 KB

1 Like
2

Hi @atm19 ,

Try adding below css to end of your base.css file.

@media only screen and (max-width: 767px) {
   section#shopify-section-template--21376786661720__collection_list_G8qAxg {
    margin-top: 15px;
   }
}

Let me know if you need any other help.

Thank you

3

Hello There,

  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 screen and (min-width: 750px){
.section + .section {
    margin-top: 40px;
}
}

ZestardTech_0-1709715176550.png
ZestardTech_0-1709715176550.png1894×787 111 KB

4

Thanks it worked. But not on the mobile version. What should I do? :ok_hand:t4:

5

Hello @atm19 ,

Please add the below mentioned code at the bottom of theme.liquid file before body tag for the mobile version.

@media screen and (max-width: 749px){ section#shopify-section-template--21376786661720__collection_list_G8qAxg { margin-top: 15px !important; } }

Output →

Anshul_arora_0-1709722632854.png
Anshul_arora_0-1709722632854.png1525×816 97.3 KB

I hope this helps.

Please let me know if you have any query.

Thank you.

6

What body tag? cannot find it there is more “body”. Thank you

7

Hi @atm19

Go to the online store → edit code → theme.liquid file and search for and add the css above the