Too much white space Slideshow image mobile (Prestige Theme)

Store Design

Topic summary

A user is experiencing excessive white space between a slideshow image and the header on mobile devices using the Prestige theme.

Solutions Proposed:

Two community members offered CSS-based fixes:

  • Solution 1: Add custom CSS to the theme’s stylesheet (base.css, style.css, or theme.css) targeting the slideshow carousel with a negative top margin (-50px) for mobile screens (max-width: 749px). This approach includes a before/after screenshot showing the reduced spacing.

  • Solution 2: Insert CSS code near the closing </head> tag in the theme.liquid file, though the specific code snippet appears incomplete in the discussion.

Status: The issue remains unresolved as the original poster has not confirmed whether either solution worked. Both responses request marking a solution if helpful.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want to remove the whitespace between the picture and the header

MS2333_0-1740401852419.png
MS2333_0-1740401852419.png733Ă—883 148 KB

1 Like
2

Hi @MS2333

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
slideshow-carousel#carousel-template--22687055544584__slideshow {
    margin-top: -50px;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @MS2333 ,

Please follow this guide:
a. Goto Shopify Admin → Online Store → Themes
b. On your current theme, click … → Edit code
c. Follow 1 → 2 → 3 to search end of head tag

theme-liquid.png
theme-liquid.png1794Ă—907 95.5 KB

d. Add follow code, it can be fix your problem