How to increase product card size in featured collection on mobile view

Hello!

I spent hours just trying to figure this out and couldn’t find anything that helped.

The product card size is too small. I’m looking to make product card bigger on mobile view.

store link:- https://www.aesthetixme.shop/

Theme:- craft

This is what it currently looks like:

and how should it looks like.

thank you.

hi its mostly done in case of slider because when a customer open the site on mobile it will show that these are sliders so you can swipe to check other products but if you still want to use it

@media (max-width: 768px) {

#shopify-section-template–17207848993022__featured_collection_Xb77Q9 slider-component ul li.slider__slide {

width: 44% !important;

}

}

in your section custom css

didn’t worked!

Hi @hitesh01

Please add this code below to theme.liquid file after in Online Store > Themes > Edit code


it worked!

thank you.

there is an problem

on product page the images are mashed up

Hi! I have the same problem, but can’t see the code that’s been pasted. What should I paste in to my theme editor?

Please share the link to your store.

My store is aydostudios.com. The theme is Fabric

Hey Dan! could you help me with my problem?

Hi,
Sorry for missing your message. Can you explain your request so I can check?

Hey Dan. I would like my product cards to appear larger in mobileview. At the moment the size of the product card is to large in mobileview, and I can see to much of the product card in a carousel. Please see attached photos for reference from another store. It is how I would like it to look like.

You can add this code to Custom CSS in your theme settings and check

@media (max-width: 749px) {
.resource-list__carousel .resource-list__slide {
    flex: 0 0 90% !important;
}
}


Thanks! It work perfectly.

You are very welcome!