Header slider image width 100%

Hello! I would like my header slider image to be 100% width, no matter the browser width, so that people can see the entire width of the image at all times. Then I would like the site content below that to happen right below (no empty space). I tried pasting this into custom CSS:

#slideshow .slides-container .slide-item{
background-position: top center;
background-size: 100%;

…which does make the image 100%, but there is all this white space underneath:

Do you know what custom CSS I could use to make the header slider 100% width and auto height so that the content below is right below like normal?

Thank you very much for your help!

Hello there,

You should manually define the slider height on a particular viewport width.

See the following example:

@media only screen and (max-width: 900px){
    height: 400px !important;

@media only screen and (max-width: 600px){
    height: 210px !important;