Shopify themes, liquid, logos, and UX
I'm using the craft theme, and on the desktop site, the collages are different sizes, as seen below:
I want them to be equal sizes, like how they are on the mobile site, as seen below:
How do I do this? I'm aware that I'll have to change some code, as now the only option to change it on desktop is "left large block" or "right large block".
My website is www.elementsofearth.ie
Hi @elementsofearth ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/collage.css->paste below code at the bottom of the file:
@media (min-width: 750px){
.collage {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.collage__item--right:nth-child(3n - 2) {
grid-column-start: 1 !important;
}
.collage__item--right:nth-child(3n-1):last-child {
grid-column-start: 2 !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
Thanks so much for the reply. That worked perfectly for the first collage on my site, but it didn't apply to all of them, any idea why? Image below
Try setting the right image as the large one, worked for me
I'm trying to do the same, but the suggested code had no effect. My theme is unpublished, but that shouldn't matter, should it?
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024