Responsive Image Banners (two separate images)- Dawn Theme

Shopify Discussion
1

since there is no good way to create an image in Dawn Theme that looks good in both mobile and desktop does anyone know some code to make for two separate images (one for desktop and another for mobile) ?

I see other sites have one horizontal image for desktop and one more vertical for mobile. I know how to do it easily in WordPress but for some reason Dawn Theme does not include these responsive functions. ANy help would be appreciated as my site looks god awful on mobile.

Thank you!

1 Like
2

Hi @bryan76

If you like to have different images for desktop and different images for mobile you can follow the instruction here.

And when you like a custom code for separate images like left and right. There is some paid shopify theme have that design.

3

Thank you. I had watched that video a year ago and did not want to implement. Could be a solution yet I am just looking for the code to have the First Image and Second Image options in the Image Banner each be for desktop or for mobile. Should be something to the effect of: @media screen min 749px .. first child 100%, second child display: none … etc. etc.

4

So do you like to used only css code? Im a developer but I cant imagine how will I render the two images for dekstop and mobile. With css alone, it would be hard.

5

the image banner allows for two images so it’s fairly simple. below is what I have so far. the problem I have is making the images the correct size to fit properly but with some adjustment I believe it is going to work. (yes I have been working on this non stop since my post). here is what I put in the customer css box:

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none !important;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
.banner__media + .banner__media {
padding-bottom: 85% !important;
padding-left: 60% !important;
}
}

6

Hello Bryan, did you find a solution? I’m going through the same issue. Thank you!

7

yes. it works. this is what I am using. you can change or add padding to adjust

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none !important;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
.banner__media + .banner__media {
padding-bottom: 70% !important;
padding-left: 60% !important;
}
}