I have the Dawn theme for my store. I have a banner up. It shows fine on the desktop but on mobile the sides of the banner are cut off. How do i fix this so that mobile shows the full banner?
Hey @PatriceDianakay
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
nipeal
Hi, @PatriceDianakay .
You can follow these steps:
Go to Online Store → Themes → Edit code.
Go to Assets folder → Base.css file.
Add the following code at the bottom of the file.
@media (min-width: 320px) and (max-width: 767px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
height: 19rem;
}
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution.
Your store link please
add !important tag in the code .
Like These and and let me know it’s working and not.
@media (min-width: 320px) and (max-width: 767px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
height: 19rem !important;
}
}
Please go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom
@media (max-width: 767px) {
.banner__media {
height: fit-content !important;
}
.banner__media img {
position: relative !important;
object-fit: contain !important;
object-position: center center !important;
}
}
Please go to your Online store > Themes > Edit code > open base.css file, and add this code at the bottom.
@media (max-width: 767px) {
.banner__media {
height: fit-content !important;
}
.banner__media img {
position: relative !important;
object-fit: contain !important;
object-position: center center !important;
}
}
Thank you!!! You are a life saver!
Happy I could help!