Debut Theme - Reduce slideshow height but keep the content of the pic without cropping

Technical Q&A
1

Does anyone know how to accomplish this? Currently my slideshow height is way too tall. I’d like to shrink it down in height but keep the pictures content without losing anything.

2

Hi @HSimpson Can you show me your store URL?

Also you can customize the height by changing in theme settings.

BrianDev_0-1628868702840.png
BrianDev_0-1628868702840.png2509×1253 327 KB

3

Hi @Henry_dev ,

Changing the slide height with the pre selected sizes crops the picture and I lose content. URL is simpsons-schoolhouse.myshopify.com You will see the two slideshow banners, they both need to retain all info but be shorter.

4

If you set your .slideshow_image class to have background-size: contain; instead of background-size: cover; that should work

5

Hi @Arvanitas ,

I can’t find .slideshow_image anywhere… can you provide it’s location? I’ve looked in slideshow.liquid, theme etc but cannot find that string

6

@HSimpson a couple of suggestions.

First of all remove the padding-top of 55px on home page between the menu and the slider. Add the following code at the end of theme.css file

@media only screen and (min-width: 750px) {
  .template-index .main-content {
    padding-top: 0;
  }
}

And there is also another white padding that you can remove in the specific slider sections

@media only screen and (min-width: 750px) {
  #shopify-section-1627051446d850bf41,
  #shopify-section-16270690973537752c {
     padding-top: 0;
     padding-bottom: 0;
  }
}

that will look better on desktop for medium resolution, but still to big on full HD or 4K display.

You may consider to reduce the content width for the header to 1200px. I think the result will be better

@media only screen and (min-width: 750px) {
  .template-index .main-content {
    padding-top: 0;
    max-width: 1200px;
    margin: 0 auto;
  }
}

After that you need to fix the slide images too

@media only screen and (min-width: 750px) {
  .template-index .slideshow__image {
    background-size: contain;
  }
  #Slideshow-1627051446d850bf41 { 
     height: 480px;
  }
  #Slideshow-16270690973537752c {
    height: 375px
  }
}
7

Hi @drakedev thank you for the suggestion however it did not provide the result I was looking for. The images were too narrow… I played around with sizing and it still is not providing me with the results I was hoping for… I’m at a loss as to why this process is this difficult.