Solved

Close gap between images in Product List page

cdgerard
Shopify Partner
43 2 3

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.

Accepted Solutions (2)

AnneLuo
Shopify Partner
414 84 79

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

AnneLuo
Shopify Partner
414 84 79

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
414 84 79

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3

Thanks, it works! 

 

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

 

 

muticolumn.png

AnneLuo
Shopify Partner
414 84 79

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3

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
Shopify Partner
802 221 250

Hi @cdgerard,

May I suggest to update code these steps:

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

2. Update the setting

EBOOST_0-1712641392019.png

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

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

EBOOST_1-1672356985580.png
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;
  }
}

 

 

 

 

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST