Solved

dawn theme collage image resize

Popcorn
Explorer
104 0 13

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 

Accepted Solutions (3)

GemPages
Shopify Partner
5588 1261 1209

This is an 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:

GemPages_0-1675675543151.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

GemPages
Shopify Partner
5588 1261 1209

This is an 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;
}
}

 

GemPages_0-1675743595543.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

GemPages
Shopify Partner
5588 1261 1209

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

GemPages
Shopify Partner
5588 1261 1209

This is an 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:

GemPages_0-1675675543151.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Popcorn
Explorer
104 0 13

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 🙂 Screen Shot 2023-02-06 at 8.08.41 PM.png

Popcorn
Explorer
104 0 13

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
Shopify Partner
5588 1261 1209

This is an 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;
}
}

 

GemPages_0-1675743595543.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Popcorn
Explorer
104 0 13

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? Screen Shot 2023-02-07 at 3.16.28 PM.png

GemPages
Shopify Partner
5588 1261 1209

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Popcorn
Explorer
104 0 13

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