Image banner too large on desktop only-Refresh theme

Store Design

Topic summary

A Shopify store owner using the Refresh theme needs help reducing the size of their homepage image banner on desktop, while keeping the mobile version unchanged.

Proposed Solutions:

Multiple developers offered CSS-based fixes:

  • BSSCommerce-B2B suggested modifying the base.css file with a media query targeting screens 750px+ wide, adding a transform: scale(0.8) property to reduce banner size
  • PageFly-Noah recommended adding custom CSS code to theme.liquid above the </body> tag, noting that reducing height may crop the image and suggested redesigning the desktop image to fit the frame if the CSS approach fails

Current Status:

The issue remains unresolved. The store owner tested all three suggested solutions but reported none successfully fixed the problem:

  • One solution made product text very small without affecting the banner
  • The other attempts simply didn’t work

BSSCommerce-B2B has followed up asking for clarification on remaining issues to provide further assistance.

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

Hello, I hope everyone is doing well! Currently,I love how the main image banner on my homepage looks on the mobile screen. Sadly on the desktop it is too big and I would like to make it smaller . Would love some assistance. Refresh theme :slightly_smiling_face: Thanks!

The URL is: https://www.girlonarunbox.com/products/monthly-subscription

2

Hi @Kelli111

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

@media screen and(min-width: 750px) {
.banner--content-align-center .banner__media {
    transform: scale(0.8) !important;
}
}

Result

BSSCommerceB2B_0-1718517060829.png
BSSCommerceB2B_0-1718517060829.png1257×865 192 KB

If it helps you, please like and mark it as the solution.

Best Regards

3

This is Noah from PageFly - Shopify Page Builder App

Hi @Kelli111 Please add code here to fix it. I have tried a few ways for you to try to see if this works for you.

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Because the image in desktop mode will be large if you want to reduce the height it will be cropped. I think if the above method doesn’t work, you can redesign the desktop image to fit the desktop frame and re-upload.

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

4

Thank you. This didnt seem to fix the issue. I appreciate your time :slightly_smiling_face:

5

Thank you. I’m afraid this one didnt work. :slightly_smiling_face:

6

Thank you. This made the product text appear very small but didnt have an effect on the banner pic. Thank you for trying :slightly_smiling_face:

1 Like
7

Hi @Kelli111
Have you tried following my instructions yet? What is the remaining issue? Please let me know, and I’ll respond as soon as possible. Best regards

8

Thank you. I’m afraid this one didnt work.