Please add this code to Custom CSS of the mobile’s slideshow section
.media img {
object-fit: fill;
}
Topic summary
A Shopify store owner created separate slideshow banners for desktop and mobile versions. The desktop banner includes text embedded in the image, while the mobile version uses default text overlays to allow the image to fill the entire screen.
The core issue: The mobile banner image wasn’t displaying fullscreen as intended, unlike the desktop version which fills the viewport completely.
Solutions attempted:
- Initial suggestions involved CSS code using
object-fit: coverandobject-position: centerproperties - One contributor recommended
object-fit: filltargeting the banner media element - The final working solution set the banner height to
100vh(viewport height) via custom CSS
Resolution: The issue was resolved when the store owner applied CSS code setting .banner { height: 100vh; } to the mobile section’s custom CSS. This achieved the desired fullscreen effect similar to the Fear of God website reference provided.
The discussion demonstrates a common responsive design challenge where different image treatments are needed across devices.
