Banner on mobile cut off and not same as desktop

Topic summary

A user encountered an issue where their second image banner displayed incorrectly on mobile devices compared to desktop. They had attempted to fix it by modifying the base.css file based on advice from other posts, but this approach didn’t work.

Another community member recommended:

  • Reverting all theme code changes first
  • Checking the block/section settings in the theme editor for image size and cropping options

Resolution: The issue was resolved by adjusting the banner height settings within the theme editor and selecting the “adapt to first image” option, which properly optimized the banner for mobile display.

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

Hello,

The 2nd image banner on my page isn’t optimized for mobile.

I’ve looked at other posts and tried copying and pasting in base.css the code the said but doesn’t work.

Please help, thank you.

https://theunavailable.myshopify.com/

First, revert any changes you made to the theme’s coding, to see if that solves the issue.

Next, go into the block/section’s settings, within the theme editor, and see if there’s an option for the image size, cropping, or formatting.

If you let me know which theme you’re using, and then which block/section you’re using for the banner, then I can try testing on my store to see if I can replicate the issue (and/or solve it for you).

There was an option to select banner height and chose “adapt to first image” and that worked. Thank yo

Awesome! Happy to help :slightly_smiling_face: