Resizing Featured Collection List mobile

[OddityAsylum]

Hi There,

I am hoping to get my featured collection images smaller to fit more products on the page at a time. currently I can only do rows that are 2 products wide. I would like it to be 4 products wide if possible. I am using Venture theme.

I have attached some images to show what I am talking about, first pic is what I'm trying to achieve, 2nd pic is what I have now.

Thanks!

[Sangeetanahar]

hello @OddityAsylum 

can you please send me the Website Url

thanks

[OddityAsylum]

Hi! 
here is my link

thanks! 
https://oddityasylum.com

[namphan]

Hi @OddityAsylum,

Please send me the store link, I will check it for you

[OddityAsylum]

Hi, thankyou!

here is my link 

https://oddityasylum.com

[namphan]

Hi @OddityAsylum,

I checked and it shows fine, did you solve it?

[OddityAsylum]

It still only showing 2 products across on mobile, I want it to be 4 products across if possible 

[namphan]

Hi @OddityAsylum,

Please go to Actions > Edit code > Assets > theme.scss.liquid file and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
    .grid.collection .grid__item {
    width: 25%;
    clear: none;
    }
}

[OddityAsylum]

Hi, Yes that has made it better! But it is still only one row. I was hoping for 3 rows down if possible?

like this picture I quickly whipped up.

[namphan]

Hi @OddityAsylum,

Please change all code:

@media only screen and (max-width: 749px) {
    .grid.collection .grid__item {
        width: calc(100% / 3);
        clear: none;
    }
}

[OddityAsylum]

Hi,

Thankyou so much for your help! its definitely better but it is still only one row on the mobile and only showing 4 products max, I want people to be able to see 3 full rows of products all at once if possible???

and also the height of each individual product is too tall, could we squish them together vertically like the pic here?

[namphan]

Hi @OddityAsylum,

Please send me the link showing this, I will check it

[OddityAsylum]

 

This is the url: www.oddityasylum.com

is that what you need? Here is another screenshot of how it looks on mobile right now, still just one row of products very tall and only 4 showing  

[namphan]

Hi @OddityAsylum,

Please change all code:

@media only screen and (max-width: 749px) {
    .grid.collection .grid__item {
        width: calc(100% / 3);
        clear: none;
        display: block !important;
    }
}

[OddityAsylum]

Thankyou yes that is much better, is there a way to make each products box shorter? They are very tall so all the pictures show up small with black on top and bottom, can we make the space between each row smaller? This is a current screen shot 

 

[namphan]

Hi @OddityAsylum,

This will need to rewrite the grid module for it, if you want please send me the contributor code, and I will send you an invite and check it

[OddityAsylum]

Thankyou, I have sent the code via msg to you. 

[magicalearthbug]

Hi there 😊 I am trying to achieve the exact same thing you are... I'm also using venture and need the featured collection images to be smaller, exactly what you've been trying to do...  Were you guys able to sort it out? I've been following this chat to get to the end result and then you guys went private 😊😅

[namphan]

Hi @magicalearthbug,

Can you send me the store link, I will check and guide it 😊

[magicalearthbug]

Hi there, thank you so much 🙂 Here's my store's link: https://www.magicalearthbug.co.za/

[namphan]

Hi @magicalearthbug,

Now you want it to show 3 items in a row on mobile like above?

Please explain further what you would like to change. I will check it.