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

Store Design

Topic summary

A user seeks to preserve original image dimensions in Dawn theme’s “image with text” section on desktop, as images are being cropped or resized automatically.

Problem:

  • Images in the text section appear cut off on desktop view
  • User wants desktop display to match mobile view’s full image sizing

Solution Provided:
GemPages support team supplied custom CSS code to add to base.css file:

  • Initial code attempt was incomplete
  • Corrected code targets specific section ID with height: auto property for the image media element
  • Code uses media query for screens min-width 750px

Outcome:

  • Solution successfully resolved the image sizing issue
  • User requested additional help to adjust vertical positioning of heading and text elements
  • GemPages provided follow-up CSS code using padding-top adjustments with media query at 990px width

Note: The conversation includes CSS code snippets that are central to implementing the fix.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
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