How can I resize collage images in Dawn theme to square ratio?

[Popcorn]

hi, I need help with my collage for dawn theme. I was wondering if anyone knows the code to resize only the images for my collection and featured product in my collage to a square ratio. Thanks in advance 🙂 

https://lua-wolves-crystals.myshopify.com/

password: bahcri 

[GemPages · Accepted solution]

Hello @Popcorn 

You can try adding code by following these steps:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/XkUYXZPnym_E

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file https://prnt.sc/3hHo820-yg_G

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card--standard .card__inner,
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .media.media--transparent.ratio{
    --ratio-percent: 100% !important;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .collage .collage-card-spacing img{
  object-fit: cover;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .card .media{
   aspect-ratio: 1;
}

4. Save the file and double-check.
Result:

Best regards,
GemPages Support Team

[GemPages · Accepted solution]

Hi @Popcorn 

You can add code to make background for text in the collage:

Online Store -> Theme -> Edit ->  Paste the below code at the end of the base.css file.

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card:not(.ratio)>.card__content{
   padding-left: 9px;
}

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card-wrapper, #shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card-wrapper .card__media{
  background-color: rgba(21,19,39,0.7);
}

You can try adding code to keep the original image ratio for the main image on mobile

@media screen and (max-width: 749px){
 #shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .collage--mobile .collage__item--left:nth-child(3n - 2) .media.media--transparent.ratio{
    --ratio-percent: 127.29257641921397% !important;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .collage--mobile .collage__item--left:nth-child(3n - 2) .media.media--transparent.ratio img{
   object-fit: none;
}
}

Best regards,
GemPages Support Team

[GemPages · Accepted solution]

Hello @Popcorn 

You can try adding code by following these steps:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/XkUYXZPnym_E

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file https://prnt.sc/3hHo820-yg_G

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card--standard .card__inner,
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .media.media--transparent.ratio{
    --ratio-percent: 100% !important;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .collage .collage-card-spacing img{
  object-fit: cover;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .card .media{
   aspect-ratio: 1;
}

4. Save the file and double-check.
Result:

Best regards,
GemPages Support Team

[Popcorn]

Thank you so, so much! Your code worked perfectly. I also, need help in adding a semi-transparent or opaque background for my text in the collage for both my featured product and collection. I can't seem to change the background color for it. Thanks in advance 🙂 

[Popcorn]

For the main image, it shows up perfect on desktop but on mobile, it gets cropped even though I selected to keep the original image ratio. Would you happen to know how to fix that? Thanks. 🙂

[GemPages · Accepted solution]

Hi @Popcorn 

You can add code to make background for text in the collage:

Online Store -> Theme -> Edit ->  Paste the below code at the end of the base.css file.

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card:not(.ratio)>.card__content{
   padding-left: 9px;
}

#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card-wrapper, #shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card-wrapper .card__media{
  background-color: rgba(21,19,39,0.7);
}

You can try adding code to keep the original image ratio for the main image on mobile

@media screen and (max-width: 749px){
 #shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .collage--mobile .collage__item--left:nth-child(3n - 2) .media.media--transparent.ratio{
    --ratio-percent: 127.29257641921397% !important;
}
#shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0  .collage--mobile .collage__item--left:nth-child(3n - 2) .media.media--transparent.ratio img{
   object-fit: none;
}
}

Best regards,
GemPages Support Team

[Popcorn]

Thank you so, so much! Your code worked out perfectly. I just have one more request that I need help with if you can accommodate. 

How do you format this text to be more up or in alignment with my other text in mobile view? 

[GemPages · Accepted solution]

Hi @Popcorn 

You can try adding this code.  😄

@media screen and (max-width: 749px){
  #shopify-section-template--16312299356399__9eed3f78-9c3b-4602-a6b3-c79f1b4579d0 .card__content{
    flex-grow: 15;
 }
}

Best regards,
GemPages Support Team

[Popcorn]

Worked great! Thank you so much for helping me. I appreciate it! Hope you have a lovely day over there ❤️