hero banner: how do i make it such that the image isnt adjusted through pc and mobile?

Topic summary

A user is experiencing image cropping issues with their hero banner on the Dwell theme. On mobile devices, the banner image gets cropped to fit rather than scaling proportionally, while desktop displays correctly.

Attempted Solution:

  • Changed CSS from background-size: cover to background-size: contain
  • This fixed the desktop view but created new problems on mobile (image appears with unwanted spacing/layout issues, as shown in attached screenshot)

Current Status:

  • Issue remains unresolved
  • Another user reported experiencing the same problem with Dwell theme
  • One commenter suggested using CSS media queries for mobile-specific adjustments, but noted the password-protected site link isn’t working for further inspection

Setup Details:

  • Theme: Dwell
  • Hero configured as image background
  • Site is password-protected (password: scrawl)
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.

To clarify, the images for the hero banner when looking at it from pc and mobile is different, where the mobile version the image is cropped to fit

how do i make it such that the image is just shrunk instead so it keeps the structure/integrity of the image/video?

1 Like

https://www.scrawledsenses.shop/password

password: scrawl

Thanks for clarifying! To keep the full structure of the image/video on both desktop and mobile (instead of it being cropped), you’ll want to adjust the CSS so the media scales down rather than covering the area.

Look for the section’s background settings or custom CSS, and try changing background-size: cover; to background-size: contain;.

Let me know your theme name and how your hero is set up (image background or inline media), and I can give you the exact fix.

thanks for the response!

changing it to contain works for on pc, but on mobile it looks like this

theme is dwell

hero is set up as image background if im not wrong (im not so sure)

Hi, I am having the same issue on dwell.

Need to check css for this in mobile and even may be used media query. the password you provide it’s wrong.