Hi,
Currently on the desktop version of the homepage I have a featured collection. When there are only 1 or 2 images in a row, they take up the full width.
I want all the product images to be of equal size (same as the first row that has 3 images). So, the second row would also be divided into 3 columns.
@oona - can you please share this page link where you have it?
Hi @oona ,
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
yes, it’s http://starfell.co
yep! its http://starfell.co
Thanks!
@oona - right not you have 2 products only, can you please put third so we can set css for it?
Ok, I added another product, but now it switched to a 4-column layout instead of three.
Hi @oona ,
You can follow the instruction below:
.grid__item {
flex-grow: unset !important;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
@oona - I see 4 products, can you try by removing 4th?
@oona - check customize settings, you should have option to limit products to 3
@AvadaCommerce Thank you! This works perfectly when I have 5 products, but unfortunately it still shifts to 4 columns when I add a 6th product.
@suyash1 It actually only lets me limit the “maximum products to show”, so the other products disappear from the homepage featured collection altogether. Also, it doesn’t let me select three-- it jumps from 2 to 4 on the slider.
@oona - if somehow you are ok with 6 products then we can make 2 rows of 3 products each
@suyash1 Ah, I wish! We will have 7 products total.
And ideally we will be able to add and remove products as needed, while still maintaining 3 columns.
@oona - it is bit mismatch maths then, 7 products- 3 in a row,
even if we add 3 in 1 then last one will be in third row
or 2 rows with 4 and 3 products
@suyash1 I am ok with one product being by itself on a row. I just want it to be the same size as the 3-column images, like this:
@oona - it can be done, can you please add products to section? will give you the css
@suyash1 Thank you.
I have 7 products in the section. Are you unable to see them? This is what it looks like on my end
@oona - please add this css to the very end of your base.css file and check, should look like screenshot below
@media screen and (min-width: 750px){
#shopify-section-template--15082907369679__featured_collection .grid .grid__item
{
max-width: calc(33% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
width: calc(33% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}
@suyash1 Amazing! That worked perfectly, thank you so much!!
If it’s not too much trouble, I have one last question. I’d love for it to be a single column on mobile. Is that possible?
