Shopify themes, liquid, logos, and UX
Hi.
I have an image on my homepage which is displaying larger than the screen size (as pictured). It fits perfectly in desktop so only want to change the size on mobile. How can I do this please?
using dawn 2.0 theme. Site URL https://93d862.myshopify.com password stecew
Thanks in advance
Solved! Go to the solution
This is an accepted solution.
You can try using another code
@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
display:none !important
}
.banner__media.media img,.banner__media.media{
position:static !important
}
}
Hi @Ryanxanthopoulo,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file section-image-banner.css
Step 3: Paste the below code at bottom of the file -> Save
@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 19.5rem !important;
}
.banner__media.media img{
object-fit: contain !important;
}
}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
Hi. This has worked, however now I can see this
This is an accepted solution.
You can try using another code
@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
display:none !important
}
.banner__media.media img,.banner__media.media{
position:static !important
}
}
Thankyou this has fixed this!
You are welcome. I'm glad when I can help you 😍
Hello @Ryanxanthopoulo ,
You can follow these steps:
1. Go to Online Store->Theme->Edit code
2. Open your theme.liquid file, paste the below code before </body>
<style>
@media (max-width: 767px ) {
#shopify-section-template--17919053922597__image_banner .banner__media {
position: relative;
}
#shopify-section-template--17919053922597__image_banner .media>img {
object-fit: unset;
position: relative;
}
}
</style>
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
User | RANK |
---|---|
72 | |
61 | |
60 | |
48 | |
44 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023