I am using the Dawn theme. I need help making my banner on mobile resize to correct format. My banner on desktop looks great but when I switch to mobile half of it is cropped out. How do I make the mobile version for the dawn theme a correct size but still have my desktop banner look normal?
@wholesaleitems1 - please use 2 separate banner images, 1 for desktop and 1 for mobile. Then add these 2 images in 2 separate sections and then add both these sections on page.
Then using css, we can hide the non required section based on screen view size.
1 Like
Thank you!
1 Like
@wholesaleitems1 - welcome, let me know if you need anything later, you can message or you have email below.
Sorry quick question. Do you have a Css example? I cannot find it anywhere in the code
@wholesaleitems1 - it is always site specific and section ids change, they are different on different sites
So I have both banners up. 1 above and one below. The one below I found the section id in elements. Now what? Thank you for helping out this can get a little confusing at times
@wholesaleitems1 - can you share the link? and let me know which banner you want on which view?
I want the bottom one for mobile, the size isn’t correct these are just test banners im using
@wholesaleitems1 - add this css to the very end of base.css file and check
@media screen and (max-width:749px){
#shopify-section-template--16497598693603__image_banner{display:none; visibility:hidden;}
}
@media screen and (min-width:750px){
#shopify-section-template--16497598693603__1664721035761e7923{display:none; visibility:hidden;}
}
1 Like
Worked perfectly! Thank you for your time. Do I just change the section id when I get my correct banners? Dumb question I just want to make sure
@wholesaleitems1 - yes just change section ids when you change your images