A user reports that collection header images on their Shopify store (using the Expanse theme) are cropping incorrectly on mobile devices, while displaying properly on desktop.
Proposed Solution:
OneCommerce suggested adding CSS code to the base.css file:
.collection-header__image {
width: 100%;
height: auto;
object-fit: contain;
}
Current Status:
The issue remains unresolved. The original poster tried implementing the CSS fix in both the base.css file and the custom CSS editor, but the cropping problem persists on mobile. Another user confirmed the solution doesn’t work.
The discussion includes screenshots showing the desktop version (full image) versus the mobile version (cropped), though the image URLs appear corrupted in the thread.
Hello,
On my site, the collection header assigned by default at the top of each collection page (Shopify uses the Collection Image to generate this) is getting cropped at mobile view. How do I make it so the image scales with the size and always shows the full width of the image? I am using Expanse theme.
Here is the desktop, and then mobile version where it cuts the image.
Hello @evaneaster ,
You can try to follow these steps:
Go to Online Store → Theme → Actions → Edit code
Go to Assets folder → base.css file → add this code at the bottom page:
.collection-header__image {
width: 100%;
height: auto;
object-fit: contain;
}
Save and preview
Hope this can help you out. Let we know if you need any further support.
OneCommerce team.
Content is still getting cropped at mobile. I added the code into css file
and tried it in the custom css in editor as well. No luck.
doesn’t work