How can I get my image banner to look nice on mobile vs. desktop? I've tried it all

Store Design
, , ,

Topic summary

A user is struggling to optimize an image banner in the Dawn theme for both mobile and desktop views. The main issues include:

Current Problems:

  • Using “adapt to image height” makes the banner too small on mobile
  • Creating separate images (hiding one on mobile) works initially, but the desktop version crops when fullscreen
  • An unexpected shadow or overlay appears after changing the background color to match the design
  • Cannot locate the source of this unwanted color effect

Proposed Solution:
Another user provided CSS code snippets to:

  • Add media queries for mobile responsiveness (max-width: 767px)
  • Adjust background-size, position, and height properties
  • Change the banner section background color

Status: The issue remains unresolved. The original poster is still seeking help to fix the color overlay problem and find a working solution for responsive banner optimization across devices.

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

I’m having a major issue with the Dawn theme image banner. I want to do a graphic design, rather than just a photo, but it cuts it off. When I do “adapt to image height,” it’s too small on mobile. I have broken the design into 2 photos, hidden the second one on mobile, and it looks good, but when the desktop view is fullscreen, the height of the section maxes out (cropping the image).

Thought I was close to a solution, but after changing the background color (to the exact same hex code used in the design), there appears to be a shadow or an overlay. I can’t find where that color would be coming from.

Does anyone have a solution for optimizing mobile and desktop views for the image banner? Or does anyone know how I can fix the color? I’m stuck on this and losing my mind.

URL is: https://lolaandtaewholesale.com/

Pass to view: Amanda

Screen Shot 2023-07-24 at 5.21.54 PM.png
Screen Shot 2023-07-24 at 5.21.54 PM.png2878×846 177 KB

2

Hello,

Here’s a general guide for you to follow:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

@media (max-width: 767px) {
  .hero-banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 300px;
  }
}

To change the background color, you can add this code below:

.banner-section {
  background-color: #f0f0f0;
}

Save and preview

Hope this can help.

Transcy