How to increase the space between collection list image dawn

Store Design
1

NOT1_0-1725439127887.png
NOT1_0-1725439127887.png1895Ă—551 268 KB

Please add different codes for mobile and desktop I want 10 px on desktop and 14 on mobile

Thanks in advace

2 Likes
2

Please share your store URL and password.So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

3

Hello @NOT1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 768px) { .collection-list.grid { column-gap: 10px !important; } } @media screen and (max-width: 767px){ .collection-list.grid { column-gap: 14px !important; } }

Tech_Coding_0-1725439903758.png
Tech_Coding_0-1725439903758.png314Ă—338 126 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

Hi @NOT1 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

Hi @NOT1 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

6

Hello! Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css” OR “theme.css”.
  6. Add the following code at the end of the file.
@media screen and (min-width: 750px) {
.collection-list.grid {
    column-gap: 10px !important;
}
}

@media screen and (max-width: 749px) {
.collection-list.grid {
    column-gap:14px !important;
}
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

7

Hey thanks for your reply but already 5 person gave the solution but I will still get you a accept as solution :slightly_smiling_face:

1 Like