Solved

Remove center Gap on Collection list in Homepage

miltokas
Excursionist
45 0 12

Hi there!

I have a homepage with a collection list of 2 items. On the web version I was able to remove the center gap using the following code:

 

<style>
@media screen and (min-width: 767px) {
.collection-list.grid {
column-gap: 0 !important;
}

 

but on the mobile version the center gap is still there, How can I remove the gap also on the mobile version?

miltokas_0-1705178354334.png

The website is www.vengastore.com

Can you help me with this issue?

Thanks!

 

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5105 1218 1490

This is an accepted solution.

Hi @miltokas 

Check this one. 

 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (max-width: 767px){
.grid {
    column-gap: 0px;
    justify-content: center;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1705185982068.png

 

If it wont work you can add !important. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 3 (3)

biznazz101
Shopify Partner
477 44 84

Go to Themes> "..."> Edit Code> base.css> Then Add This Code At Bottom:

 

 

 

 

ul#Slider-template--19415971791180__7ebf5d64-1a1f-4966-a8f2-d9451a3d8d78
@media screen and (min-width: 750px) {
  .grid {
    column-gap: 0px;
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

 

 

 
Click Save and Preview Changes

biznazz101_0-1705181385503.png


If you have any trouble just let me know I can do this for you no problem!
@biznazz101 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
miltokas
Excursionist
45 0 12

Unfortunately the problem remains in the mobile version.

Made4uo-Ribe
Shopify Partner
5105 1218 1490

This is an accepted solution.

Hi @miltokas 

Check this one. 

 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (max-width: 767px){
.grid {
    column-gap: 0px;
    justify-content: center;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1705185982068.png

 

If it wont work you can add !important. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com