Hi, I changed the banner image on my home page, last night. I wanted to make it more personalised by adding a photo of maisey and stress why our business is different. But now the image is not fitting to a mobile screen, Can anyone please help?
can you share your store url & password (if applicable) to let me check & suggestion you the solution?
Yes please
I’ve also just noticed its cutting the top of maiseys head off on desktop?
Let add this custom css code to the end of file base.css:
@media screen and (max-width: 749px) {
main .banner__media img {
object-fit: contain;
}
}
because your image is ractaggle so on small screen it also is rectangle
So i dont remove anything at the bottom?
I didn’t got your point
Its worked, but is there no way to make the image bigger so the writing goes across or just below her face?
Yes like that please
yeah Let replace my suggest code above with this one:
@media screen and (max-width: 749px) {
main .banner__media img {
object-position: 75% center;
}
}
Thats worked thanks. 2 questions
-
can i make the text smaller on the mobile version?
-
on the desktop how do i stop the top of her head being cropped off?
You can try add more this Custom CSS code for those 2 issues:
@media screen and (max-width: 749px) {
.banner__content .banner__heading {
font-size: calc(var(--font-heading-scale) * 3rem);
}
}
@media screen and (min-width: 750px) {
main .banner--medium:not(.banner--adapt) {
height: 100dvh;
}
}
Do i replace the previous code you gave me, or add it underneath?
Let add it underneath
I have done that. The text still goes over the photo on mobile. If theres nothing i can do about that?
