Shopify themes, liquid, logos, and UX
My banners look so pretty on a desktop but whenever i click over on my phone it cuts off the banners and it just looks completely different. I’m using the Dawn Theme. and I would like to find out what needs to be done so it looks right on both devices. I’ll post my link so you guys can see it.
https://theeglamlabb.myshopify.com/
PASSWORD IF IT ASKS: jada
lease Go to Online Store->Theme->Edit code then go to assets/section-image-banner.css ->paste below code at the bottom of the file
@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt)>.banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
height: 15rem !important;
}
.media>img {object-fit: contain !important;}
}
Thanks!
Hey! I’m very new and i’ve never coded anything before sadly🥺 Could you explain with a little more detail what i need to do because Whenever I did it, the coding didn’t change anything and it actually just showed the code on the actual site
Please Go to Online Store->Theme->Edit code then go to assets/section-image-banner.css ->paste below code at the bottom of the file .
@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt)>.banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
height: 15rem !important;
}
.media>img {object-fit: contain !important;}
}
Please check following screenshot
okay it fixed it but it also does this, does that mean i know need to make my banners wider ?
No , what do you want plase share screensht
@dmwwebartisan I think the same logic applies here but is there any way to show a full-screen mobile banner? I would like automatic width and 100% height so that it fits on the screen but not sure what code I should write.
User | RANK |
---|---|
227 | |
158 | |
60 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023