How to maintain original image size in Dawn theme's text section?

Store Design
1

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 :slightly_smiling_face:

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

password: bahcri

1 Like
2

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

3

@Popcorn ,

Is this the image you are asking ?

oscprofessional_0-1677739908436.png
oscprofessional_0-1677739908436.png3652×972 1.04 MB

4

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. :slightly_smiling_face:

Screen Shot 2023-03-03 at 12.34.39 AM.png
Screen Shot 2023-03-03 at 12.34.39 AM.png825×1122 176 KB

5

Yes, that is the image. I am trying to keep the original image size, like the image size in mobile view :slightly_smiling_face:

6

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

7

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 :slightly_smiling_face:

8

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