Solved

Make product image bigger on home page for mobile

Ébloui
Excursionist
23 1 6

Hi I have a few collections on my home page but the product image stay really small on mobile. See picture

5B1419FD-7852-419C-9843-D02F46236821.pngI would like it to be a little bigger on mobile like the picture below.

4545592C-21CB-49D4-8BA7-AA02002D7F48.png

my website: www.ebloui-jewellery.com

pw: ebloui

Accepted Solution (1)
Ébloui
Excursionist
23 1 6

This is an accepted solution.

As a few times earlier I fixed it myself by using different people their feedback, which wasn't working. Go to theme editor > featured collection and change appaerance on mobile to 1 column ( I had 2 on the picture) and enable swipe.  add this code in theme liquid before </body/> tag: @media (max-width: 749px){
[id*='section'] .collection li{
max-width: 275px;
}
}
</style>

 

Change the max width pixel to your liking.

View solution in original post

Replies 3 (3)

EFOLI-Emilia7
Shopify Partner
349 10 38

Hello @Ébloui,

Need to add code into base.css file

 

.grid__item.scroll-trigger.animate--slide-in {
    max-width: 195px;
}

 

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
Ébloui
Excursionist
23 1 6

Hi, thanks for the code. Unfortunately it didn't do anything for me. Do you maybe have another or adjusted code for me to try? It is also only for mobile view of the featured collection with carousel. Like the picture of my website

Ébloui
Excursionist
23 1 6

This is an accepted solution.

As a few times earlier I fixed it myself by using different people their feedback, which wasn't working. Go to theme editor > featured collection and change appaerance on mobile to 1 column ( I had 2 on the picture) and enable swipe.  add this code in theme liquid before </body/> tag: @media (max-width: 749px){
[id*='section'] .collection li{
max-width: 275px;
}
}
</style>

 

Change the max width pixel to your liking.