Resizing image banner on Dawn theme to fit desktop

Store Design
,

Topic summary

A user is experiencing an image banner sizing issue on the Dawn theme. The banner displays correctly on mobile (where 90% of their traffic originates) but doesn’t fit properly on desktop screens.

Problem Details:

  • Mobile version appears correctly formatted
  • Desktop version shows poor fitting/scaling
  • User has limited coding experience

Solution Provided:
GemPages support offered a CSS fix involving:

  1. Navigating to Online Store → Theme → Edit code
  2. Opening base.css in the Assets folder
  3. Adding custom CSS media query code at the end of the file

The proposed code targets the banner section with specific object-position and min-width properties for desktop screens. Screenshots were provided showing the expected result after implementation.

Status: Solution has been shared; awaiting user implementation and feedback on whether the fix resolves the desktop display issue.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi Everyone

I’m trying to resize my image banner to fit nicely on to desktop. As you can see by the below photos it fits well to mobile (which is where 90% of our traffic is from). But it’s not fitting well on desktop. Hopeless over here with coding so any help would be much appreciatted!

Thanks

Shane

Mobile
Mobile1290×2796 285 KB

Desktop
Desktop1920×1080 208 KB

1 Like
2

Hello @DOGSHT

Can you give me your Store URL( with pass if your store password is enabled) so we can check it for you?

Kind & Best regards,
GemPages Support Team

3

@DOGSHT

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hello.

Website url is https://dogsht.com.au/

Thanks for your help!

5

Hi @DOGSHT

You can try adding the below code by following these steps:

  1. Go to Online Store → Theme → Edit code https://prnt.sc/NIubHkOJxV7S
  2. Open your base.css in the Assets folder.
  3. Paste the below code at the end of the file. https://prnt.sc/xS2FTEQ-m0cc
@media screen and (min-width: 750px){
   #shopify-section-template--15807585288427__image_banner .media>img{
      object-position: top right;
   }
}

The result may look like the image below:

GemPages_0-1670906316008.png
GemPages_0-1670906316008.png1903×937 174 KB

I hope the above code can work and support for you.

Kind & Best regards,
GemPages Support Team