How to NOT use a full page image on slider in Sydney

I love this theme!

One thing i am trying to use as a variation - NOT to use the full page image on the slider!

Is there a way to use images on the slider which do not cover the entire page such that the images are full width still and maybe 400px in Length?

Kind Regards


You can add this CSS code to: customize > additional CSS:

.sydney-hero-area, .slides-container .slide-item {
    height: 400px;

Let me know how it works.


@Awan - Thank you for the code.

I tried this and there is no change. I tried to use an image with the width I specified in the custom css code but still seems to stretch it to full width and length of the original look.

Any other thoughts!?

thanks again


My apologize, the code in above is used to reduce the height of the image. And you asking to reduce the width of the image, correct? if yes, please use these code instead:

.sydney-hero-area, .slides-container .slide-item{
    width: 50%;
    margin: 0 auto;


Hi Awan

Thanks again for the help.
I actually want to reduce the height yes - so the first one seemed to be the correct code but somehow the look wasnt the desired one.
After this code - the image is still stretched but looks reduced in height because if i use the title and subtitle on the slider, the text is now not centered vertically on the page anymore.

TO confirm the width of the required or recommended slider is 1980px?
So i used an image with these exact measurements but when appearing after using the code - the image is streched

So if possible maybe you can help with code to fix this.

Thanks again


Okay, so you want to reduce the image on the header slider but the text slider is not centered vertically, correct? if yes, so here is the code to fix the slider text:

.slide-inner {
    top: 65%;

The image slider on our demo website are using 1920px of width and its displayed as well, not stretched.

If its still not helped you enough, then can you share your site URL here or take a screenshot?


Hello Awan.

I have tried to follow the above… and it works fine when looking at the website on my iphone… but is still showing the FULL PAGE hero image on my mac (using either Chrome or Safari). I dont have any other tech to test it on.

Ideally I am trying to get the hero image, and the first ‘section’ to appear ‘above the fold’ for landscape viewing.

The website is … until I redirect my other domain.

Help appreciated. Thanks.

and, in addition to the above… can I reduce the whitespace between the hero image and the first section?