Hi Team,
The below image in the Shopify store is not in the right fit in desktop and mobile. Please advise.
Thanks,
Venkatakrishnan
Topic summary
A Shopify store owner reports that an image displays incorrectly on both desktop and mobile devices, not fitting properly in either view.
Proposed Solutions:
- Resize the image: Use Photoshop or GIMP to reduce the image file size, as it may be too large for the theme to handle properly
- Theme compatibility: The selected theme may not be optimized for the image dimensions; consider customizing the theme if it has specific code requirements
CSS Fix (Multiple Contributors):
Two users provided similar CSS solutions targeting mobile devices (max-width: 749px):
- Add custom CSS to the theme’s
base.cssfile or the section’s Custom CSS area - Apply
object-fit: containto.banner__media imgto ensure proper image scaling - Set specific height constraints (17-18rem) with
!importantflags
One contributor confirmed the website displays correctly on desktop after implementing the fix. The issue appears solvable through CSS adjustments to control how the banner image scales across different screen sizes.
1 Like
store name: https://utsahas.store/
it might be that the image size is to big, and somtimes the selected themes may not be in the best fit for the image
if this happen, try to resize the image using photoshop or GIMP
you can also customise your theme if it has specific code requirement
i just check the wesite on desktop and it best fit
- Here is the solution for you @Venkatakrishnan
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 749px) {
.banner__media {
height: 17rem !important;
}
.banner__media img {
object-fit: contain !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Please add this code to Custom CSS of that section
@media (max-width: 749px) {
.banner__media {
background: #fff;
height: 18rem important;
}
.banner__media img {
object-fit: contain !important;
}
}