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

Shopify Discussion
1

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?

2

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

3

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

LuizaSMC23_0-1732115958449.png
LuizaSMC23_0-1732115958449.png1099×546 481 KB

this is how it looks on live:

LuizaSMC23_3-1732116143049.png
LuizaSMC23_3-1732116143049.png1364×627 657 KB

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

LuizaSMC23_1-1732115995770.png
LuizaSMC23_1-1732115995770.png1149×426 160 KB

The full image is this:

LuizaSMC23_2-1732116065677.png
LuizaSMC23_2-1732116065677.png626×800 225 KB

4

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

5

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):

LuizaSMC23_0-1732119081290.png
LuizaSMC23_0-1732119081290.png1040×599 147 KB

LuizaSMC23_1-1732119191682.png
LuizaSMC23_1-1732119191682.png951×536 159 KB

6

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;
}
}
7

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?