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

Store Design
, , , ,
1

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:

IMG_D4A1499693E8-1.jpeg
IMG_D4A1499693E8-1.jpeg1290×2796 157 KB

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)

IMG_D52E65BB7510-1.jpeg
IMG_D52E65BB7510-1.jpeg1290×2796 202 KB

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!

2

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

Here is result:

BSSCommerceHDL_0-1721352731391.png
BSSCommerceHDL_0-1721352731391.png1920×815 92.7 KB

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 :heart_eyes:

1 Like
3

Hi @RaghavGoel1

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

Screenshot 2024-07-19 at 08.54.08.png
Screenshot 2024-07-19 at 08.54.08.png448×574 62.4 KB

1 Like
4

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

1 Like
5

You are very welcome. Have a wonderful day!

1 Like
6

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.

@media only screen and (min-width: 600px) { .grid__item img.motion-reduce { max-width: 250px!important; object-fit: contain!important; left: auto!important; right: auto!important; } .grid__item .card .media { display: flex; justify-content: center; } }
7

I wanted to try this too, but I can’t see the code? It looks empty for me :frowning:

8

Thanks for sharing your URL. I checked the mobile layout of your Featured Product section, and the issue comes from how the theme handles horizontal scrolling when the section is set to “1 product per view.” By default, many Shopify themes apply fixed padding or container widths that prevent the product card from aligning cleanly edge-to-edge in mobile view.

9

Could you share your product URL so I can check and give you the code?

10

it is meant for this landing page as on mobile only 2 of the 3 products are visible and the 3rd can hardly be seen, no customer will understand there is more to see and sadly my theme doesn’t have dots or arrows to scroll in this section

11

You can add this code to Custom CSS of that section then check

.small-6 { max-width: 45%; }
1 Like
12

OMG it worked! You can’t imagine how many blogs, forums and help sites I checked. Thank you so SO much!!

1 Like
13

You are very welcome!

1 Like