How to make banner images responsive from desktop to mobile views

[JenniferF]

Hello everyone! When I post my "As Seen In" banner on my website the font shrinks a lot in mobile view. Is there a code I can add to my theme to make it responsive? I'm using Dawn theme 14.0.0. I found a code through another post, but it did not work. My URL is www.jennszencreations.com.

[suyash1]

@JenniferF - have you added the banner on home page?

[JenniferF]

I've added it but have it hidden for now.

[suyash1]

@JenniferF - can you activate it?

[JenniferF]

It is active now.

[suyash1]

@JenniferF - it is not the font which is shrinking, but it is the image which is shrinking, you need to separate text and image

[JenniferF]

How would I do that?

[suyash1]

@JenniferF - create a new banner without text as seen in.... add this text as text only from customize settings and add this new banner as image

[JenniferF]

Ok, I will try that. Thank you, I appreciate your help. 💜

[JenniferF]

Also when I view it on mobile, the image is above the text. How would I fix that?

[JenniferF]

I separated them, but the text is over the image. I'm not sure how to move the text up.

[suyash1]

@JenniferF - using custom css the text can be moved, I am not able to see this text on live home page

[JenniferF]

Ok, I saved it. It is live now.

[suyash1]

@JenniferF - add this to the end of your base.css file and check

---

---

@media screen and (max-width: 749px) {
#Banner-template--22812441805081__image_banner_zJhjLQ{flex-direction: column-reverse;}
}

[JenniferF]

I added the code, it is not working.

[suyash1 · Accepted solution]

@JenniferF - replace old code with this 

@media screen and (max-width: 749px) {
#Banner-template--22812441805081__image_banner_zJhjLQ{flex-direction: column-reverse;}
#Banner-template--22812441805081__image_banner_zJhjLQ .banner__box{padding: 2rem 3.5rem;}
}

[JenniferF]

I tried the new code, it's still not working.

[suyash1]

it is working on mobile, on desk it will need different settings

[JenniferF]

I adjusted the position of the logo on the banner and it looks better on mobile view.

[JenniferF]

How do I change the settings for desktop? Does that need a separate code?

[suyash1]

@JenniferF - hi yes desktop needs different css

[JenniferF]

Actually it did put the text above in mobile view but the logo is really far down now.

Desktop view, the text is still over the image.