Small slider image make a huge gap between Slider and Service Section





This is my site. I’m working here now. https://www.lifesanthem.com/

I’ve used 1500 x 600 size slider image. After that, a big gap created between slider and service section.I want to show the service section headline at first-time page load Without scrolling the page. I’ve tried with service section padding-top: 0; It did not work. I guess it’s the problem from slider block.

Hello there,

The web inspector tool showing that this extra code might changes the background image height.

    div#slideshow div.slides-container > div.slide-item {
        background-size: 100%;
    }

To fix without removing that code, you’d have to add this CSS code to Additional CSS:

    @media only screen and (min-width: 1025px) {
      .sydney-hero-area .header-slider {
        height: 100vh !important;
      }
      div#slideshow div.slides-container > div.slide-item {
        background-size: cover !important;
      }
    }

Regards,
Kharis

Thank You. @kharisblank

This solution does not work. It makes the slide image default size of the theme.

When the site is loaded on that time without scrolling I want to view Service section with my 600 px height slider image.

I’ve removed this code. But the same result. Without this code, I can’t control the height of the slider image.

div#slideshow div.slides-container > div.slide-item {
background-size: 100%;
}

I think I’ve got my solution from your other comment.

Only this block of code is solution.

@media only screen and (min-width:992px) {

.header-slider {
height: calc(100vh - 210px) !important;
height: -moz-calc(100vh - 210px) !important;
height: -webkit-calc(100vh - 210px) !important;
}

}

https://forums.athemes.com/t/reduce-size-of-slider-image/

Great! Happy to hear you figured that out yourself.

Regards,
Kharis