New Header: Unwanted white space above and below header on mobiles.

[Plymrocker]

Hello –
I have been looking for similar problems for solution, for hours. Can’t find solution.

I am redesigning my site, and starting w/ changing new mobile responsive header first. I loaded the range of full and mobile sizes in media library and then through the Genesis widgets things on the left. I am just replacing all the former ones, with the new design logo image. They are the same height as before, but full width now.
The width is showing fine.
They were all mobile responsive before, and seem to still be so.

Is there somewhere else I need to make changes, though? Because…..

*PROBLEM: I am getting LOT of white space above and below the header, when previewing for tablets and phones.
Desktop/laptop is fine and as it should be. Meaning, menu bars are abutting the header image. That's how I want it to show on everything.

Giving links to screenshots of previews.
*NOTE: My site has a maintenance mode plugin going while I update the site....so you can’t just visit it. However, I am hoping these screenshots will help you see the problem.

Here is a link to the folder of the images, as previews of desktop, tablet and phone:
https://www.dropbox.com/sh/03ple77p8sl3xti/AADJwXfxqTsMeKBEP82TWzGIa?dl=0

Theme: LifeStyle Pro
WP 4.7.2
I would appreciate any help! Thanks. 🙂

[Victor Font]

You are most likely not adjusting the CSS in the media queries. It's ompossible to tell from images. Need to look at the CSS in the browser.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Plymrocker]

Victor! You helped me before: I was able to install my new menu bars, thanks to you. 🙂

Ok well, can you tell me what to look for and where? Or, should I add you as an admin to go in and look?
I can't make my site active and accessible right now to the public. Too much traffic, and the new look is a secret until it's done.

[Victor Font]

If you can check your new site at http://semalt.design/, you could use the browser inspect tool for various device sizes to determine what needs to change.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Plymrocker]

Well that's a cool site! I saved it. But currently, even though I am logged into my dashboard, the maintenance mode plugin page comes up, as it would for visitors. I can visit my own site through my dashboard - unless I was logged out.
So, that site will be helpful once I am live.

Problem is, when it goes live, and everyone visits from their mobile devices, I don't want it messed up. Can I email you log in info as an temp admin, or something?

[Plymrocker]

Help anyone, please?

[Plymrocker]

ADMIN: Please delete. No resolution here for readers with similar issues, and I removed dropbox images. Receiving help elsewhere. My apologies. Thank you.

[carrie]

Don't delete this post! I had a similar problem yesterday... and the day before... ugh. Anyway, RESOLVED!!

1. Go to: http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

2. BUT First, follow the 4 steps described in Option 6 of Getting Your Head Around Header Images but for Step 3 use the following CSS code which is here:

http://keypresswp.com/getting-your-head-around-header-images/#option6

3. After I completed Option #6 (but used Step 3 as per above or you'll get your Site Description displayed below the header!) it worked like a charm after refreshing a few times 🙂

If anyone cares and for anyone searching the forum for this, the plugin Polylang (I'm doing a French/English website) works with Genesis/Lifestyle Pro. So far I've set it up with Pages, Navigation and Menu with no conflicts. For photo galleries, the plugin Soliloquy Pro is also working and I have not yet run into any issues.

Carrie

[carrie]

I replied to this but it's not showing up, I'll try again...

Don't delete this post! I had a similar problem yesterday... and the day before... ugh. Anyway, RESOLVED!!

1. Go to: http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

2. BUT First, follow the 4 steps described in Option 6 of Getting Your Head Around Header Images but for Step 3 use the following CSS code which is here:

http://keypresswp.com/getting-your-head-around-header-images/#option6

3. After I completed Option #6 (but used Step 3 as per above or you'll get your Site Description displayed below the header!) it worked like a charm after refreshing a few times 🙂

If anyone cares and for anyone searching the forum for this, the plugin Polylang (I'm doing a French/English website) works with Genesis/Lifestyle Pro. So far I've set it up with Pages, Navigation and Menu with no conflicts. For photo galleries, the plugin Soliloquy Pro is also working and I have not yet run into any issues.

Carrie

[Brad Dalton]

Here's another solution tested on the latest version of the Lifestyle Pro theme.

---

Tutorials for StudioPress Themes.

[Author]

Posts