Header image

hi.how to have header image covering full screen on mobile version like sydney pro?
thanks

1 Like

Hi,

Please post a link to your website, so we can check.

Best Regards,
Csaba

hi there.my header is like the west pro demo.can we do the header looking like sydney demo?
i mean to cover all the screen of mobile and focused somewhere i nthe picture like sydney demo?
thanks

Hi,

Sorry I don’t understand clearly what you want to achieve, Sydney Pro have an identical header like West Pro, so please point out what you want to have from there, maybe a screen-shot with the thing you want to achieve, may be of a good help, understanding what you want to achieve.

Best Regards,
Csaba

hi again check please the 2 screenshots and you will understand what i mean

sydney on mobile version, it covers the whole screen of the image
west on mobile version,image is not coverd on the whole screen
i would like to have my image on west pro like the sydney(covering the whole screen)
as you can see on west pro the image is on full width from left to right but it is very short.So i can see content from the services,which i do not like it
can you help me on this please?how to have my image covering the whole screen
thanks

Hi,

On mobile you can make the West Pro’s crelly slider slideshow height to be about the same as Sydney Theme’s height on mobile, with this Custom CSS:

@media only screen and (max-width: 680px) {
.crellyslider, .crellyslider > .cs-slides > .cs-slide {
    height: 660px !Important;
}
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

i do not use crellyslider. i use single image from appearance>customize>header type>image.
can you please give me css for this
thanks

Hi,

Then try this Custom CSS instead:

@media only screen and (max-width: 680px) {
.header-image {
    height: 660px !Important;
}
}

If this will not work, then I will need to see your site live to give you a working Custom CSS, so please post a link to your website.

Best Regards,
Csaba