Image banner too large on desktop only-Refresh theme

Store Design
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.