hello, i am struggling to change background color and padding for the container on mobile for the banner with picture on Dawn theme. When you add a banner with a picture, the button to see the product is in the middle of the banner on phone and you cannot see it, so you can use “Show container on mobile” and the button is under but you cannot change the background color and i would like to put in black and reduce the top and under padding too only for mobile because on the computer it is big enough to see the banner, do you know how to proceed ? thx you 
Topic summary
Issue: On Shopify’s Dawn theme, the banner with a picture places the product button in the middle on mobile, making it hard to see. Using “Show container on mobile” moves the button below, but the user cannot change the container’s background color or adjust vertical padding only for mobile.
Proposed solution: Add a mobile-only CSS rule in base.css using a media query (max-width: 767px) targeting the banner container classes to set background to black (#000) and adjust padding (e.g., 40px top/bottom, 0 left/right).
Key snippet (concept):
- Media query: applies only on small screens.
- Selector: banner container (.banner__box with specific classes).
- Properties: background: #000; padding: 40px 0;
Outcome: The original poster confirmed with thanks, suggesting the solution works. No conflicting views were raised.
Status: Resolved. No further action requested.
Notes: A screenshot was attached but not essential for implementing the CSS fix.
Add This css in your Base.css File
@media screen and (max-width:767px){
.banner__box.content-container.content-container--full-width-mobile.color-scheme-3.gradient {
background: #000;
padding: 40px 0;
}
}
1 Like
thx !!
1 Like