images are not getting displayed correctly on mobile (www.10xfuel.com 
now: new:
how to fix this?
Topic summary
A user reports that images on their Shopify store (10xfuel.com) display incorrectly on mobile devices, appearing squeezed with altered dimensions.
Initial Solution Attempted:
- Artzen_tech suggested adding CSS to modify image object-fit properties
- This approach caused images to squeeze and change dimensions, which wasn’t acceptable
Revised Solution Provided:
For banner images:
- Remove height from the div element
- Add media query CSS targeting screens under 767px to set
min-height: 0!importanton banner content
For section images:
- Additional CSS code was mentioned but appears corrupted/unreadable in the thread
Status: The discussion remains ongoing with technical solutions being iteratively refined. Screenshots were shared to illustrate both the problem and proposed fixes.
Hi @10xfuel
Its Artzen Technologies! We will be happy to help you today.
Add the following CSS in your CSS file or Base.CSS file.
.media > img {
object-fit: fill!important;
}
This CSS will make your images in desired manner. Refer to Screenshot.
Let me know if need further assistance
Regards,
Artzen Technologies
Hi! the images get squeezed (=different dimensions) by this code - yet the dimensions should not be changed. Any thoughts?
For banner image remove the height on the div. and add following CSS
@media screen and (max-width: 767px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 0!important;
}
}
And for this section image add the following CSS.
@media screen and (max-width: 767px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
height: 16rem!important;
}
}
