Homepage slideshow full screen on mobile

Shopify Discussion

Topic summary

Goal: make the homepage slideshow truly full-screen on mobile (covering the entire viewport top-to-bottom and left-to-right) while keeping desktop unchanged.

Observation: one reply says the slideshow already fills the mobile screen; the apparent non–full-screen look may come from the image’s white area on the left.

Constraints: mobile’s narrower width and on-image text can hurt readability. Suggestions include hiding text or embedding text/CTA within the image via design.

Proposed approaches:

  • CSS: use position: absolute to move bottom content and add an overlay (opacity) on the image to improve text visibility.
  • Design: supply an alternate, mobile-optimized banner image and adjust content positions for mobile.
  • Sizing: force full-screen via CSS viewport units (VH for height, VW for width).

Key terms: VH/VW are CSS units based on the viewport; position absolute is a CSS positioning method; CTA is a call-to-action button.

Status: no resolution yet; OP requested further help from a specific contributor. A screenshot was shared but the discussion remains open.

Summarized with AI on February 7. AI used: gpt-5.
1

Hi community,

Hoping you can help.

I would like to make my homepage slideshow appear full screen on mobile:

Website is https://www.muthapuppa.com/

Could anyone please help with this?

Giuseppe

2

Hi Giuseppe,

Can you further detail your inquiry? At first glance, the slideshow is appearing full screen on mobile.

GabrielS_0-1665525020802.png
GabrielS_0-1665525020802.png463×738 54.3 KB

The images used are having white background on the left side, perhaps this gave you the impression that it is not full screen?

Cheers!

3

Hi Gabriel, thanks for the response.

By full screen on mobile, I mean top to bottom and left to right. The desktop image should stay the way it is.

Hopefully that makes sense.

Giuseppe

4

Hello @gbmangione ,

Can you explain your query in detail,

Based on your query, we can get that you want to make your Shopify store homepage appear full screen on your mobile as it appears in the desktop version.

FYI, the width of a mobile website is smaller as compared to the desktop site so here we can move the written content above the image, however, this will hide the image and the only solution is to remove the written content.

Also, you can hide the written content and use text with the CTA button on the image with the help of your graphic designer.

Let us know if you need any further help from us.

Regards,

CedCommerce.

5

@KetanKumar can you help with this?

6

Here you have 2 options to tackle this issue.

  1. Sift bottom content using position absolute and add overlay with opacity on image so it’ll solve visibility issue.

  2. You can design & set alternate image for mobile size and set position of contents accordingly.

If you want banner image with full screen height and width then you can use “VH” & “VW” sizes parameters.

I hope this will help you.