How to add a different size photo on the banner from Dawn theme

[LuizaSMC23]

Hi, I use Dawn theme and it only allows to enter one picture to the banner and the same image is used for notebook version and mobile version. I would like to use a different image in a different size for mobile version, How can I do that?

 shoptarz.com

[DaisyVo]

Hi @LuizaSMC23 

To complete your requests, please follow these steps:

1. Add Images for Desktop and Mobile:

   • In the Image Banner block, there are two spots where you can upload separate images for desktop and mobile views.
   • You can see an example here: Image Example. Upload the respective images in each section.

2. Add Custom CSS in Shopify:

   • Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS Custom CSS Guide.
   • Paste the provided CSS code into the Custom CSS section.

.banner .banner__media.media:nth-child(2) {
    display: none;
}
.banner .banner__media.media:nth-child(1) {
    width: 100%;
}
@media screen and (max-width: 768px){
.banner .banner__media.media:nth-child(2) {
    display: block !important;
    width: 100%;
}
.banner .banner__media.media:nth-child(1) {
    display: none;
}
}

Here is the result: https://prnt.sc/4SEokLkf2Z_e

I hope this helps

Best,

Daisy

[LuizaSMC23]

Hello dear,

Thank you so much for your help! If you could please give me another hand, the code worked to add different images for mobile and notebook version, but now the images are not showing in the right size, they are being cut.

Please see how I see on editor's page:

For notebook version it is correct on editor's page, only on live the image is being cut, looks like it is zooming in the image

this is how it looks on live:

For mobile version the height of the image is being cut:

The full image is this:

[DaisyVo]

Hi @LuizaSMC23 

Please add this code more into the same position above:

@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
    height: 600px;
}
}

Here is the result: https://prnt.sc/oUT-UsQZa2uE

I hope this helps

Best,

Daisy

[LuizaSMC23]

Hello,

I'm sorry, it didn't work. Here is what I past in the custom CSS field: 

.banner .banner__media.media:nth-child(2) {
display: none;
}
.banner .banner__media.media:nth-child(1) {
width: 100%;
}
@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
height: 600px;
}
}
}
.banner .banner__media.media:nth-child(1) {
display: none;
}
}

Now this is what I see on editor's page (it is getting only the first image added for notebook version, but on live the image is still the same as before, cut and showing the second image added):

[DaisyVo]

Hi @LuizaSMC23 

It must be: 

.banner .banner__media.media:nth-child(2) {
    display: none;
}
.banner .banner__media.media:nth-child(1) {
    width: 100%;
}
@media screen and (max-width: 768px){
.banner .banner__media.media:nth-child(2) {
    display: block !important;
    width: 100%;
}
.banner .banner__media.media:nth-child(1) {
    display: none;
}
@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
    height: 600px;
}
}

[LuizaSMC23]

Hi, it worked for mobile! But now for notebook the image is cut, also the image quality has decreased, is it because of the code?