Increasing width of product card on slick slider mobile

Store Design
1

Hi I would like to increase default width of product cards in this slick carousel, but only for mobile. Currently you can see the width is 180px but I’m struggling to locate the code where this is set. I would like this width to be 230px. Any help?

https://biifwn96njcvs8yj-26608304175.shopifypreview.com

SIVA2020_0-1692176992288.png
SIVA2020_0-1692176992288.png2878×1356 403 KB

2

I basically want to display 1.5 products instead of 2 on mobile

3

Hi @SIVA2020

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
@media (min-width: 360px) {

.productGrid .product, .productGrid.column-2 .product, .productGrid.column-3 .product, .productGrid.column-4 .product, .productGrid.column-5 .product {width: 100% !important;}

}

Regards,

San

4

Hey @SIVA2020

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 tag

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

Best Regards,
Moeed

5

I tried this but nothing changed. It seems like the custom width is overriden by something else

6

I tried this but nothing changed. It seems like the custom width is overriden by something else. I think I need to change something with width{calc…}