Full screen slider - Jumbotron

Illdy
1

Hello,

I would like to understand how to modify the size of the slider. Interested in a full screen one, exactly as seen in your demo: at https://colorlib.com/illdy/ The theme comes with a smaller version.
Why aren’t also the images responsive? see them distorted on smaller devices.

Thank you,
Timeea

2

Hello Timeea,

The demo header image is 2000x1250px, so you might want to use the same size.
There’s no fullscreen easy method, it depends of the monitor screen height and it’s different from one to another. You should play with the picture height until you get the layout you are looking for.

Please use this CSS code to fix the streching behaviour on mobile screens:

@media (max-width: 768px) {
  #header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
   }  
}

The above code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a Custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.

Let me know if this is what you were looking for and if it fixed the issues.

Regards

3

Thank you for getting back to me this quickly. I will follow your suggestions.