How to make my slideshow banner fill out the whole screen on mobile?

Shopify Discussion

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: cover and object-position: center properties
  • One contributor recommended object-fit: fill targeting 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.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
4

Yes, the desktop slideshow image has the text as a part of image because it was easier to customize the text. However on mobile, I didn’t do that because I wanted the whole screen on a phone to be the image similar to how on desktop the whole screen is filled up with the image. I believe using an image with the text attached would somehow ruin that.

Also for your solution, I actually wanted the whole screen to be full on mobile, not for the whole image to show.

So something like the https://fearofgod.com/ on mobile where the whole entire screen in the image with the button in the middle.

Thank you!