Remove center Gap on Collection list in Homepage

[miltokas]

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?

The website is www.vengastore.com

Can you help me with this issue?

Thanks!

[biznazz101]

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

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

[miltokas]

Unfortunately the problem remains in the mobile version.

[Made4uo-Ribe · 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:

If it wont work you can add !important.