IMPORTANT PLS: Reduce Size of Product Card (Featured Collection) in Mobile only

RaghavGoel1 · ‎07-18-2024

Hi all,

On my homepage I have added a featured product section and kept it '1 section only' with 'scroll enabled' for mobile view. My URL is - https://f40566-d3.myshopify.com/

Currently this is how its appearing on mobile view:

However, I'm finding the product cards to be too large in size. I don't want to shift to '2 colomns' for mobile view since that looks weird and too cramped.

I want to make it look something like this:
(reference URL - goudagames.in)

As you can see, not two full colomns neither one, somewhere in the middle.

Can someone please help me achieve this? Would be very helpful.

Thank you!

Dan-From-Ryviu · ‎07-18-2024

Hi @RaghavGoel1

You can do that by adding this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 749px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
     width: calc(100% - var(--grid-mobile-horizontal-spacing) - 12rem) !important;
    }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

BSSCommerce-HDL · ‎07-18-2024

Hi @RaghavGoel1,

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 (max-width: 749px) {
    .collection .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: calc(70% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    }
}
</style>

Here is result:

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Dan-From-Ryviu · ‎07-18-2024

Hi @RaghavGoel1

You can do that by adding this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (max-width: 749px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
     width: calc(100% - var(--grid-mobile-horizontal-spacing) - 12rem) !important;
    }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RaghavGoel1 · ‎07-19-2024

Thanks @Dan-From-Ryviu, this worked well! 😄
Have a good day.

Dan-From-Ryviu · ‎07-19-2024

You are very welcome. Have a wonderful day!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

jehan70 · ‎10-13-2024

It adds gap in each card in my situation. I had like it to be 75% mobile or tablet screen.

Edit:
Added the code and it fixed.

}

</style>

IMPORTANT PLS: Reduce Size of Product Card (Featured Collection) in Mobile only

IMPORTANT PLS: Reduce Size of Product Card (Featured Collection) in Mobile only

Community Blog Articles