Issue with banner display

Store Design
, ,

Topic summary

A user running a Shopify store with a minimal theme is experiencing banner display issues. The banner displays correctly on mobile devices but appears improperly on desktop screens.

Troubleshooting attempts:

  • Multiple community members requested the store URL to diagnose the issue
  • Store URL shared: https://dorins.net/
  • One contributor identified the root cause: the banner image dimensions (1920x1920) create display problems on desktop
  • Recommended solution: resize the image to 1920x650 for better desktop presentation

Code solutions offered:

  • CSS adjustment to modify page width (:root { --page-width: 1660px !important; })
  • Custom CSS targeting the banner section with object-fit properties
  • Instructions provided to add code in theme.liquid file before </head> tag

Current status:
The issue remains unresolved. The user reports that proposed fixes either don’t fully solve the desktop display problem or negatively impact the mobile version, cutting off the banner entirely on mobile devices. The discussion is ongoing as participants work toward a solution that maintains proper display across both desktop and mobile screens.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello Shopify community,

I use a minimal theme for my store, I have a problem with the banner. The Banner appears fine in mobile, but when I move to a desktop screen it is not properly displayed. I tried to find it in the theme settings but don’t look for it.

Is there a way to fix this or make adjustments so that the bunner will look good on larger screens?

Thanks in advance for your help!

2

@barak33 Can you please share this page link?

3

Hi @barak33 !

Could you share your store url?

4

Hi @barak33

It will better to me suggest the solution if you can share me the store url + password (if appliable)

Thanks

5

Hello @barak33
I’d be happy to help with a free marketing and design audit To give you the most accurate feedback, could you kindly share your store URL? This will allow me to provide tailored suggestions for improvement.

6

Hello there Barak @barak33 you can try this code to give your header a compact and wider look

:root { --page-width: 1660px !important; }

Let me know how this works for you!

7

https://dorins.net/

8

Hi @barak33

Because your image have size 1920x1920 so it display like that.

I can change to display full as below but it still not ok because bad at horizonal sides

BiDealDiscount_0-1745766516435.png
BiDealDiscount_0-1745766516435.png1308×967 172 KB

I suggest you should resize image to 1920x650

9

Thanks, it’s better but not yet perfect

10

Where exactly am I embedding the code?

11

is this ok?

BiDealDiscount_0-1745768298575.png
BiDealDiscount_0-1745768298575.png1315×966 288 KB

12

The question is how will it be in mobile …?

13

Hi @barak33

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

14

we only change for desktop screen

15

No, it really cut me all the Banar and in the display Mobile changed completely