[kryptidofficial]

Site URL: http://www.kryptidofficial.com

My site has a homepage with various widgets that appear as you scroll down. I have a header image and logo that I’d like to have fill the entire width of the screen no matter on desktop or mobile, so that users will have to scroll down to see any part of the other widgets. I’m not sure this is working responsively because I added an image of a certain width & height and it appears to fill the screen on most browsers and devices but on Firefox Focus on an iPhone, I see the top of the next widget when I land on the homepage. I’ve been advised that seeing the top of the next widget distracts from the branding, which is what the header image is intended to do (it’s an all-black image on which the header logo appears). Can you show me the CSS needed to guarantee that all users landing on the site will only see the menu and header image/logo no matter what device and browser they are using?

[sapana]

@dilipramji: Go to=>Customizer=> Appearance=> Additional CSS=>add the following code

.custom-header.header-media {
    height: 100vh !important;
}

Let me know if this works out!

Kind Regards,
Sapana

[kryptidofficial]

@sapana: Looks like that did the trick! I’ll test it a bit more but so far so good. Thanks!

[kryptidofficial]

How do I make that functionality only happen on the homepage but not the rest of the site?

[sapana]

@dilipramji: Go to=> Appearance=> Customizer=> Additional CSS=>add the following css code

body:not(.home).custom-header.header-media {
    height: 100vh !important;
}

Let me know if this helps you out!

Kind Regards,
Sapana

[Author]

Posts