Dawn Theme -image banner-2 different images on desktop (not adapted) vs mobile (adapted/full screen)

[Ankita31]

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 </head>:

<style>
/* 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;
}
}
</style>

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?

Thanks 🙂

[PaulNewton]

@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.

 https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

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.

[Ankita31]

Hi @PaulNewton - thank you for replying.

Can you help me understand your reply a bit better by providing an example of how to achieve this?

[Dan-From-Ryviu]

Hi @Ankita31 

You can create different Image banner sections, one for mobile and one for desktop.

In Custom CSS desktop section, please add this code to hide it on mobile. 

@media (max-width: 767px) {
.banner { display: none !important; }
}

In Custom CSS of the mobile section, add this code to hide it on the desktop.

@media (min-width: 768px) {
.banner { display: none !important; }
}

[made4Uo]

Hi @Ankita31 

Try the video below to create a different image for desktop and mobile. 

[tim]

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:

1. Create two banner sections, one setup for desktop, another for mobile.
2. Insert a "Custom liquid" section before each of them.
3. Here is what you should paste into each of these sections:

{% if request.design_mode %}
  <h3>hide next section on mobile </h3>
{% endif %}
<style>
 @media screen and (max-width: 749px) {
   #shopify-section-{{section.id }} + section  { display: none }
 }
</style>

And

{% if request.design_mode %}
  <h3 class=page-width>hide next section on desktop </h3>
{% endif %}
<style>
 @media screen and (min-width: 750px) {
   #shopify-section-{{section.id }} + section  { display: none }
 }
</style>

(the "hide..." message will obviously be only shown in Customizer)

See how it works for "recommended products" section -- desktop/mobile: