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 |
---|---|
140 | |
114 | |
79 | |
64 | |
64 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023