Close gap between images in Product List page

[cdgerard]

Hello, Please can someone help me work out how to close the gap between images in the product list page, ie: collections page (in desktop version).

In DAWN theme.

I would like the images to be touching each other.

Thanks a lot.

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  @media (min-width: 750px) {
    .collection .grid{
      column-gap: 0 !important;
      row-gap: 0 !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  @media (min-width: 750px) {
    .collection .grid{
      column-gap: 0 !important;
      row-gap: 0 !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[cdgerard]

Thanks, it works! 

Also how could I remove the gap in a multicolumn on the home page? See attached grab...

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  @media (min-width: 750px) {
    .multicolumn .page-width .grid {
      column-gap: 0 !important;
      row-gap: 0 !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[cdgerard]

Hi AnneLuo,

How can this code work for mobile also? Currently it only works for Desktop view.

<style> @media (min-width: 750px) { .multicolumn .page-width .grid { column-gap: 0 !important; row-gap: 0 !important; } } </style>

[EBOOST]

Hi @cdgerard,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> customize -> Theme setting

2. Update the setting

If you only want update for collection page. May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

@media screen and (min-width: 750px) {
  .collection #product-grid {
    column-gap: 10px;
    row-gap: 10px;
  }
}