Solved

How to make banner images responsive from desktop to mobile views

JenniferF
Explorer
57 1 9

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.

Jennifer F
Accepted Solution (1)
suyash1
Shopify Partner
9432 1174 1515

This is an 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;}
}

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me

View solution in original post

Replies 21 (21)

suyash1
Shopify Partner
9432 1174 1515

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

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

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

@JenniferF - can you activate it?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

It is active now.

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

How would I do that?

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

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

Jennifer F
JenniferF
Explorer
57 1 9

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

Screenshot 2024-06-01 9.52.59 PM.png

Jennifer F
JenniferF
Explorer
57 1 9

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

Screenshot 2024-06-01 9.45.45 PM.png

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

Ok, I saved it. It is live now.

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

I added the code, it is not working.

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

This is an 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;}
}

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

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

Jennifer F
suyash1
Shopify Partner
9432 1174 1515
it is working on mobile, on desk it will need different settings
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

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

JenniferF_0-1717302507369.png

 

Jennifer F
JenniferF
Explorer
57 1 9

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

Jennifer F
suyash1
Shopify Partner
9432 1174 1515

@JenniferF - hi yes desktop needs different css

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
JenniferF
Explorer
57 1 9

Screenshot 2024-06-01 10.06.08 PM.png

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

 

Screenshot 2024-06-01 10.06.21 PM.png

Desktop view, the text is still over the image.

Jennifer F