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
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024