Change slideshow height on publisher theme

Store Design
1

Hello I wish to change the slideshow height on the publisher theme for desktop and mobile so that the slideshow covers 95% of the height on the desktop homepage and 60% on the mobile homepage.

5 Likes
2

@Jarch1 You can adjust the slideshow height with a bit of custom CSS. Add this under Online Store → Customize → Theme Settings → Custom CSS (or your theme editor’s CSS section):

/* Desktop slideshow height */
@media screen and (min-width: 1025px) {
  .slideshow, .slideshow__slide {
    height: 95vh !important;
  }
}

/* Mobile slideshow height */
@media screen and (max-width: 1024px) {
  .slideshow, .slideshow__slide {
    height: 60vh !important;
  }
}

That’ll make the slideshow cover about 95% of the screen on desktop and 60% on mobile.
If it doesn’t work right away, use Inspect to confirm your slideshow section’s class name (for example, .slideshow-banner or .slideshow-section) and replace it in the code.

3

Hi @Jarch1
Please share the link to your store so I can review it and provide you with the code.

4

Hi @Jarch1

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hello @Jarch1

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

6

Hi,

Hope this will help

  • Duplicate theme → Edit code → open base.css.

  • Paste CSS block
    CSS Example

/* === Publisher: Slideshow height control === */
/* Change these two numbers if you want a different height later */
:root {
  --slideshow-height-desktop: 95vh; /* 95% of screen on desktop */
  --slideshow-height-mobile: 60vh;  /* 60% of screen on mobile */
}

/* Desktop: 990px and wider */
@media (min-width: 990px) {
  /* Common Publisher slideshow containers */
  .slideshow, 
  .slideshow__slide,
  .slideshow__media,
  .banner,
  .banner__media {
    height: var(--slideshow-height-desktop) !important;
    min-height: var(--slideshow-height-desktop) !important;
  }

  /* Make the image/video fill the area */
  .slideshow__media img,
  .slideshow__media video,
  .banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Mobile: narrower than 990px */
@media (max-width: 989px) {
  .slideshow, 
  .slideshow__slide,
  .slideshow__media,
  .banner,
  .banner__media {
    height: var(--slideshow-height-mobile) !important;
    min-height: var(--slideshow-height-mobile) !important;
  }

  .slideshow__media img,
  .slideshow__media video,
  .banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

  • Save, then tweak section padding in the Theme Editor.

  • Result: 95% height slideshow on desktop, 60% on mobile, images nicely cropped.