Make more than 3 collection columns in collection - reduce size of products

Solved

Make more than 3 collection columns in collection - reduce size of products

AmberWilkinson
Excursionist
24 0 4

Collection https://shop.jimmybarnes.com/collections/jimmys-book-club

Make more than 3 collection columns in collection - reduce size of products

Accepted Solution (1)

Moeed
Shopify Partner
5417 1463 1750

This is an accepted solution.

Hey @AmberWilkinson 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.small-6.medium-6.large-4.columns {
    max-width: 20% !important;
}
}
</style>

RESULT:

Moeed_0-1726483674658.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
5417 1463 1750

This is an accepted solution.

Hey @AmberWilkinson 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.small-6.medium-6.large-4.columns {
    max-width: 20% !important;
}
}
</style>

RESULT:

Moeed_0-1726483674658.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


AmberWilkinson
Excursionist
24 0 4

Ahhh legend! Thanks so much

Moeed
Shopify Partner
5417 1463 1750

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


websensepro
Shopify Partner
1220 136 156

Hi @AmberWilkinson ,

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: 768px) {
.small-6.medium-6.large-4.columns {
    max-width: 20% !important;
   }
}
</style>

websensepro_0-1726484244935.png

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

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

BSS-TekLabs
Shopify Partner
2350 701 826

- Here is the solution for you @AmberWilkinson 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media print, screen and (min-width: 66.75em) {
    .large-4 {
        max-width: 20% !important;
    }
}
</style>

- Here is the result you will achieve:

BSSTekLabs_0-1726487577613.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now