Responsive images and media queries

Question

I am working on my first real website and struggling with media queries and the positioning. I want to create a one page design with a landing page on top that contains a big image and the menu. For smaller screens I want to hide this big image and show only the menu.

So my plan was to build a mobile version without the image that should be extended by media queries. In my Html I created a relative positioned div including the image and a relative positioned div for the headline and the navigation:

<div class="relative">
    <img id="landingimg" class="bigimg" src="http://placekitten.com/g/1200/800">
    <div id="header">
        <h1 class="center headline">HEADLINE</h1>
        <nav>
            <a class="navigation" href="">Link</a>
            <a class="navigation" href="">Link</a>
            <a class="navigation" href="">Link</a>
            <a class="navigation" href="">Link</a>
        </nav>
    </div>
</div>

The image was set to display:none; . With a screen size of more than 400px I want to display the image ( #landingimg ) and to reposition the navigation div ( #header ) within the container by this query:

@media screen and (min-width: 470px) {

    .headline {
        font-size: 200% !important;
    }

    #landingimg {
        display: inline !important;
    }

    #header {
        position: absolute !important;
        top: 30% !important;
    }
}

This approach regrettably did not work and led to the following problems:

1. The media query does not insert the image when the screen size changes.
2. On very small screens the header/menu overlays the content or the footer overlays the menu. This happens even both are set to position:relative, display:block/inline etc. or on the same z-index level. I tried thousand times to fix this with different approaches but without success. I just do not know how to prevent this effect.
3. I had to use !important in my query to get it work, but do not know why. I work with the id of the element to prevent any priority conflicts but that does not work...

In the following fiddle I used an alternative solution with opacity (instead of display:none; ) for the image to give you an idea how it should work but that solves not the problem that the menu overlays the content if the screen gets very small and that also means that mobile devices still load the image. You find it here: https://jsfiddle.net/9pj5ux3L/

The initial approach with display none is stored under this link: https://jsfiddle.net/h56nx35g/2/

Hope somebody can show me a more professional solution. Thanks!

Answer 1

I will advise you adopt a "mobile first" approach, start from a mobile/small screen then work your way up to tablet then desktop. Trust me it less complicates development, especially working with media queries: https://codemyviews.com/blog/mobilefirst

Answer 2

Yeah, coding mobile first makes designing responsive layouts much easier for most people. You should redesign with this in mind or, if you love this design and feel like leveling up your developer skills, perhaps implementing some minimal javascript would help. With it, you could dynamically inject code into your HTML at a certain breakpoint.

Alternatively, if you want to keep it as simple as possible, you can just set your image as a background-image on your header div. Then, set background-image:none at your specified breakpoint with a media query.

Removing pieces of content from the HTML is difficult with just CSS - it hurts performance (because the site still has to load and cache the content) as well as reduces accessibility ( display: none; won't hide your content from screen readers, for example). Adding your image as a background element, or injecting it with Javascript both get around these problems.

PS - You definitely shouldn't need !important tags on your media queries.