Main issue: In the Shopify Narrative theme, gallery icons appear cut off on mobile when the “Extra Small” size is selected. The request was for a way to prevent cropping and lock the mobile gallery size.
Fix provided: Add a CSS rule in the theme stylesheet (theme.scss.liquid) to set a fixed height for the x-small image bar content: .image-bar–x-small .image-bar__content { height: 125px; }. This is done via Online Store → Theme → Edit code → Assets → theme.scss.liquid. CSS (Cascading Style Sheets) controls visual styling; theme.scss.liquid is the theme’s main style file.
Outcome: The original poster confirmed the code resolved the mobile icon cutoff.
New update/unresolved: Another user reported landscape photos are being cropped on mobile (while appearing fine on desktop) in the Narrative theme. No solution was provided yet, so this follow-up issue remains open.
Hello,
I have a problem with my Gallery icons on Mobile when i choose the “Extra Small” size.
A small part of the icon is cut off, and it looks a bit weird.
Does anyone have a code to prevent this and lock the Mobile size of the Gallery to a certain size?
My website is: https://safesprayer.dk/products/safesprayer-til-overflade-desinficering and you can also see this on the mobile.
I use the Narrative Theme.
Thank you in advance.
yes, please add this code
.image-bar--x-small .image-bar__content {
height: 125px;
}
Thank you very much!
It fixed it!
Good evening,
I have the Narrative Theme as well, and I’m having issues with my landscape photo cutting off when in the mobile view. Desktop it’s perfect, mobile the sides are cut off. Any suggestions would be greatly appreciated. Thank you 