How can I enlarge the slideshow image to cover my screen?

Store Design
, , ,

Topic summary

A user seeks to enlarge their slideshow images to cover the entire (or nearly entire) screen on both desktop and mobile devices.

Solutions Provided:

  • Initial fix: Add custom CSS code to the theme.liquid file before the </body> tag to expand slideshow dimensions
  • Text/button positioning: Insert additional CSS above </style> in theme.liquid to add 200px top margin to .hero__text-wrapper, moving elements lower on screen
  • Alternative approach: Modify theme.scss file by adding CSS targeting .hero-section and .hero__inner elements, setting heights to 100vh and auto respectively

Technical Details:

All solutions involve editing theme files (theme.liquid or theme.scss) and applying custom CSS. The conversation includes code snippets for implementation.

Status: Multiple solutions offered; thread appears resolved pending user confirmation of which approach works best for their specific theme setup.

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

How to I make the slideshow image bigger? I want for it to cover the whole (or almost) screen on desktop and mobile. Thanks.

My store - https://nebulalights-17.myshopify.com/

1 Like
2

Hey @Matt789

Place this code in your theme.liquid file before

If this helps you, don’t forget to Mark it as Solution!

3

And how do I make it so that the text and the button on the slideshow are both a bit lower on the screen?

4

Place this code above in theme.liquid

.hero__text-wrapper {
    margin-top: 200px;
}
5

@Matt789

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

.hero-section .hero--small {
    height: 100vh !important;
}
.hero-section .hero__inner.media-content {
    height: auto !important;
}

I hope it would help you
Best regards,

Kate | PageFly