Make collage on desktop equal sizes on both sides

elementsofearth
Visitor
2 0 0

I'm using the craft theme, and on the desktop site, the collages are different sizes, as seen below:

Screenshot_20220329-160643_Chrome.jpg

I want them to be equal sizes, like how they are on the mobile site, as seen below: 

Screenshot_20220329-160648_Chrome.jpgHow 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

Replies 4 (4)

AvadaCommerce
Shopify Partner
3879 839 955

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.

banned
elementsofearth
Visitor
2 0 0

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

Screenshot_20220329-212934_Chrome.jpg

olerad
Visitor
1 0 0

Try setting the right image as the large one, worked for me

 

NancyL
Excursionist
14 0 9

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?