Enterprise Pro – Mobile Header (Phone)

[paulag01]

Hi there,

I've followed advice in a previous thread on Enterprise Pro Mobile header which is working fine for tablets... phone I am still running into an issue where the header image gets made really tiny (vs filling up the space).

You can see the site here: http://navaxxes.wwwss20.a2hosted.com/

I have made changes to the min-height of

.header-image .site-title a
.site-header

But once we get to small (phone portrait and to a lesser extent phone landscape) there is a tiny header image and big white space.

What am I missing?

http://navaxxes.wwwss20.a2hosted.com/

[Porter]

I found two culprits:

You're setting a padding here:

@media only screen and (max-width: 1023px)
.site-header .wrap {
    padding: 20px 5%;
}

The other is that you have a minimum-height property that's throwing things off. I'm not sure of an ideal route to fix the current setup, but changing it to 60px for this view seemed to work much better than the current 100px.

@media only screen and (max-width: 568px)
.header-image .site-title a {
    min-height: 100px;
}

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[paulag01]

Thank you Porter. That seems to help (a little). I wish the header image rendered larger (seems the theme renders it small) but so it is for now.

I find it so frustrating because Google Developer Tools doesn't match what my physical device does rendering this whole mobile testing a crapshoot (for me). I swear I have to be missing something!

I appreciate you taking time to help. If you have any mobile testing tools that you love I'm open to suggestions (always wanting to learn how to fish, so to speak).

[Porter]

I personally just re-size the browser - it's not ideal, but it works. Simply dragging the window to be as small as it can (width) generally reflects smaller phones, and making it a bit bigger moves up in devices (you'll see the media queries kick in and adjust the layout as you stretch the window size).

I just spent a good 20 minutes digging around, and I just don't get what's causing the image to render at 43.2px. If you remove all of the min-height, or anything to do with height, it always goes back to 43.2, setting height-auto, background-size contain, etc, nothing changes it - perplexing.

I'll keep looking into it when I get time, and let me know if you find anything!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[carasmo]

@porter. You really rock. I hope you get a lot of beers.

---

Genesis Theme Customization and Help

[paulag01]

Thank you Porter! And I appreciate that you are confirming my sanity here 😉

Appreciate the tip on the browser test. I thought it was just me that couldn't get the developer tool to work the way I would expect it to.

Hope you enjoy a good craft beer on me 🙂

P

[paulag01]

Porter- if you think you might be able to find a solution that would make header full width on phone without that padding .. let me know. I need to hire someone to solve this already for client launch and my solutions would be too invasive (don't want to break other mobile responsive pieces).

(You can contact me here: http://www.thepaulagcompany.com/contact-paula-g

and let me know estimate/timing and we can discuss via email.)

[Author]

Posts