Shopify themes, liquid, logos, and UX
Hi, does anyone know what code I can use to keep my original image size in the "image with text" section for desktop view? The image seems to get cut off or resized but I would like to keep my original image ratio. Any help would be appreciated. Thank you 🙂
store url: https://lua-wolves-crystals.myshopify.com/
password: bahcri
Hello @Popcorn
It's GemPages support team and glad to support you today.
You can paste below code to file base.css
@media screen and (min-width: 750px)
shopify-section-template--16312299356399__16596614828350cabe .image-with-text__media--large {
height: auto;
}
}
shopify-section-template--16312299356399__16596614828350cabe .image-with-text .image-with-text__media img{
height: auto;
}
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Hi! Thank you for your help! I tried the code but unfortunately, it didn't make any changes to the image size in desktop view. Here is a screenshot of how my image looks in mobile view as comparison. 🙂
@Popcorn ,
Is this the image you are asking ?
Yes, that is the image. I am trying to keep the original image size, like the image size in mobile view 🙂
Hello @Popcorn
It's GemPages support team and glad to support you today.
Sorry for my custom code missing a little code. Please paste below code to file base.css
@media screen and (min-width: 750px){
#shopify-section-template--16312299356399__16596614828350cabe .image-with-text__media--large {
height: auto;
}
}
#shopify-section-template--16312299356399__16596614828350cabe .image-with-text .image-with-text__media img{
height: auto;
}
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Thank you very much! It worked! For the text section, is there any code to move both the heading and text a little bit more upward? Thank you in advance 🙂
Hello @Popcorn
It's GemPages support team and glad to support you today.
You can use this code
@media screen and (min-width: 990px){
#ImageWithText--template--16312299356399__16596614828350cabe{
padding-top: 5rem;
}
}
@media screen and (min-width: 750px){
#ImageWithText--template--16312299356399__16596614828350cabe{
padding-top: 3rem;
}
}
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025