Header Image Responsiveness

[cherylmalik]

Hi guys,
I’m working on creating a different sort of layout for my new blog.. I know it’s WordPress-based, but it’s really a CSS issue I’m running into here! What I’m looking to do is essentially create a vertical menu in the sidebar and only show the traditional horizontal header on smartphones.

I’ve managed to hide the header and traditional nav bar using CSS and, when I added a media query to hide the header/nav bar with a min-device-width of 768px, it worked.. except on smartphones, the header image itself STAYS hidden. The nav bar displays, as designed. Yet the header image is nowhere to be found. I’ve stared at this little media query for a while now and cannot possibly imagine what’s going on. I’ve used Chrome dev tools and just have no idea what to even look for, considering the problem is something missing!

Here’s the media query off of which I’m working:

/* Remove horizontal header & nav bar on tablet & desktop*/

@media only screen and (min-device-width : 768px) {
    .site-header,
    .title-area,
    .nav-primary,
    .genesis-nav-menu,
     .menu-primary {
       display: none;
    }
}

I just can’t understand why that min-width query would affect anything below 768px..

Help? I’m working on Treehouse to improve my CSS skills (which are less than prodigious), so let me know if I should post there instead.

[shaneisme]

Try using min-width instead of min-device-width.

min-device-width is based on the device’s viewport, not the viewport of the browser.

If that doesn’t work, providing a live example will help us figure things out.

[cherylmalik]

Perfect! Makes sense. And I learned something too.. bonus points!

[Author]

Posts