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?
Topic summary
A Shopify store owner updated their homepage banner image but encountered display issues on mobile devices where the image wasn’t fitting properly to the screen. Additionally, the top of the subject’s head was being cropped on desktop.
Solution provided:
- Custom CSS code was added to the base.css file to adjust mobile image positioning using
object-position: 75% center - Desktop cropping was addressed by modifying banner height to
100dvh - Text size on mobile was reduced using font-size adjustments in media queries
Technical approach:
- Multiple CSS snippets were added cumulatively (not replaced)
- Code targeted specific screen sizes using
@mediaqueries for mobile (max-width: 749px) and desktop (min-width: 750px) - Image screenshots were shared to confirm the desired layout
Current status:
The main issues appear resolved, though the store owner reported text still overlapping the photo on mobile. The helper indicated this wasn’t occurring on their device, suggesting possible device-specific rendering differences. The discussion remains open regarding this final text positioning concern.
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?
