Re: How to make banner images responsive from desktop to mobile views

Solved

How to make banner images responsive from desktop to mobile views

JenniferF
Explorer
60 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
9532 1190 1529

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

 

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

View solution in original post

Replies 21 (21)

suyash1
Shopify Partner
9532 1190 1529

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

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

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

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

@JenniferF - can you activate it?

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

It is active now.

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

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

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

How would I do that?

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

@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

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

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

Jennifer F
JenniferF
Explorer
60 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
60 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
9532 1190 1529

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

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

Ok, I saved it. It is live now.

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

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

 

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

I added the code, it is not working.

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

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

 

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

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

Jennifer F
suyash1
Shopify Partner
9532 1190 1529
it is working on mobile, on desk it will need different settings
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JenniferF
Explorer
60 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
60 1 9

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

Jennifer F
suyash1
Shopify Partner
9532 1190 1529

@JenniferF - hi yes desktop needs different css

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JenniferF
Explorer
60 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