Hello, I have included a picture of what my current mobile view image banner looks like. It is very zoomed in and cropped. I would like the image to be cropped out so that more of it is in frame. Any help is appreciated!
Thank you
URL: tansokr.com
Hi there! To adjust how the banner image looks on mobile, you’ll want to change how the image fits within its container. Shopify sections often use either an <img> tag or a CSS background-image.
If it’s an <img>, you can use object-fit in a mobile media query to ensure the whole image is visible:
@media screen and (max-width: 749px) {
.your-banner-class img {
object-fit: contain;
object-position: center top; /* adjust to suit */
}
}
If it’s a background-image, override background-size on mobile:
@media screen and (max-width: 749px) {
.your-banner-class {
background-size: contain;
background-position: center top;
}
}
Replace .your-banner-class with the actual selector used for the hero/banner section. You can add the CSS in Online Store → Themes → Edit code → Assets → base.css (or theme.css). After saving, refresh on a mobile device and the image should display fully instead of zooming and cropping.
Hope this helps!
You may consider setting a Focal point on your image. Most modern themes honor this to keep most important part of the image in view.
@AndyX mentioned use of
object-position: center top; /* adjust to suit */
background-position: center top;
These will be output automatically for each image with focal point to reflect the position set.
Say, you may put focal point of your banner at “tankso” on the boys chest and it will stay visible during cropping, like the screenshot below.
Hi @gavboy555
1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media screen and (max-width: 749px) {
.banner__media {
height: 400px !important;
}
}
Adjust the pixel value as needed.
Thanks!