A user is implementing dual image banners in Shopify’s Dawn theme—one image for desktop, another for mobile. Their current CSS successfully displays different images per device, but they want to control the “Adapt section height to first image” setting independently for each view (unchecked for desktop, checked for mobile).
Proposed Solutions:
Advanced customization: Modify theme logic to add separate settings for desktop/mobile behavior, which requires technical expertise beyond basic CSS.
Dual section approach (recommended by multiple respondents):
Create two separate image-banner sections—one configured for desktop, one for mobile
Use CSS media queries in each section’s Custom CSS field to hide the appropriate section per device
Apply different “adapt height” settings to each section independently
Alternatively, use “Custom liquid” sections with conditional logic ({% if request.design_mode %}) to show/hide sections based on viewport
Key technical details:
CSS added to theme.liquid affects all banner sections globally
Media query breakpoint: 750px (mobile) / 755px+ (desktop)
Video tutorial and code snippets provided for implementation
Summarized with AI on November 7.
AI used: claude-sonnet-4-5-20250929.
Hi - I am using dawn theme shopify. Trying to create an image banner on my homepage where it uses two images, one for desktop and the other for mobile. I have the following code which works in my theme.liquid above :
/* 2 image banners, different for deskop vs mobile
Desktop version= */
@media only screen and (min-width: 755px) {
.banner .banner__media.media.banner__media-half:nth-child(1) {
display: none !important;
}
.banner .banner__media.media.banner__media-half:nth-child(2) {
width: 100% !important;
}
}
/* Mobile version only */
@media only screen and (max-width: 750px) {
.banner .banner__media.media.banner__media-half:nth-child(2) {
display: none !important;
}
.banner .banner__media.media.banner__media-half:nth-child(1) {
width: 100% !important;
}
}
However, I am trying to create different sizes/dimensions for both images depending on the device (desktop vs mobile). For desktop I would like to untick “Adapt section height to first image size” and have it ticked for mobile (please see yellow highlighted, red circled sections of the screenshot below). How do i do this?
@Ankita31 Having a theme setting for both desktop and mobile behavior requires and advanced theme customization to add that logic and new settings.
Alternatively make two image-banner sections and target the two different sections separately with CSS to show/hide them on thier target screen sizes along with disabling the auto-adapt setting for mobile in the secondary image-banner section.
You will need to modify find the right CSS selectors to target each section seperately, or try using custom-css settings to colocate styles to be within each section.
If you need this advanced customization then contact me by my email for services. Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
First – since you’re adding this CSS in theme.liquid, not section “Custom CSS”, the rules will apply to all “Banner image” sections.
Second – adding different aspect ratio settings while definitely possible would be a bit too complex for forum advice unless someone already has this code handy.
It’s possible to simply override banner height in CSS as well, but, it’d be not the best option, given “First”.
I’d approach it in a different way:
Create two banner sections, one setup for desktop, another for mobile.
Insert a “Custom liquid” section before each of them.
Here is what you should paste into each of these sections:
{% if request.design_mode %}
### hide next section on mobile
{% endif %}
And
{% if request.design_mode %}
### hide next section on desktop
{% endif %}
(the “hide…” message will obviously be only shown in Customizer)
See how it works for “recommended products” section – desktop/mobile:
