How to increase the space between collection list image dawn

[NOT1]

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

Thanks in advace 

[Tech_Coding · Accepted solution]

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 </body> on theme.liquid
<style>
@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;
   }
}

</style>

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

[BSSCommerce-HDL · Accepted solution]

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 </head> tag:

<style>
@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;
}
}
</style>

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 😍

[topnewyork · Accepted solution]

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 </head>

<style>
@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;
  }
}
</style>

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

Thanks!

[dws_pvt_ltd]

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.

[Tech_Coding · Accepted solution]

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 </body> on theme.liquid
<style>
@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;
   }
}

</style>

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

[BSSCommerce-HDL · Accepted solution]

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 </head> tag:

<style>
@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;
}
}
</style>

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 😍

[topnewyork · Accepted solution]

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 </head>

<style>
@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;
  }
}
</style>

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

Thanks!

[NOT1]

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

[dws_pvt_ltd · Accepted solution]

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.