Trying to show two different images depending on two media queries


Tags: css,html5,css3,responsive-design,media-queries

Problem :

I'm here with a problem that I don't see how I can solve it.

I have a header "topo" with a image.

And I want that image in my desktop and tablet versions, but in my media query for smartphone with 480px I want to show other image, a smaller image.

So in my 480px media query, I'm trying to give background-image with CSS and make my #logo image as display:none, so I can have my smaller image for smartphone.

But it's not working, can somebody there give me a little help?

This is my html for this issue:

<header id="topo">
    <span id="logo">
        <a href="index.php"><img src="../images/logo.png" /></a>
    </span>
</header>

I have this media query for mobile

@media screen and (max-width:480px) 
{

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}

body
{
    min-width:320px;
}

#topo
{
    width:226px;
    margin:10px auto 0 auto;
    background:url(../imagens/logo%20-%20C%C3%B3pia.png);   
}

.....
}

This is my media query for tablet:

@media screen and (min-width:481px) and (max-width:768px) 
{

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}

#topo
{
    width:700px;
    margin:10px auto 0 auto;
    background:yellow;  
}

#logo
{
    float:left;

}

....

}


Solution :

In this instance, when you set display:none on the img element, the a element collapses upon itself because the img element is the a element's only child. The background image is therefore not displayed because the a element has a height of 0. To solve this, you should set a height on the a element and change the element's display from inline to block.

Example Here

@media screen and (max-width:480px) {
    #topo {
        width:226px;
        margin:10px auto 0 auto;
        background:url('//placehold.it/200/0ff');
    }
    #topo a {
        height:200px;
        display:block;
    }
    #topo img {
        display:none;
    }
}

The above solution may work for a majority of scenarios, however, if you want to avoid setting a height on the element, i'd suggest doing something like this instead:

Example Here

Add both img elements into the markup, giving each mutually exclusive classes.

<a href="index.php">
    <img class="hidden_mobile" src="//placehold.it/200/000" />
    <img class="hidden_desktop" src="//placehold.it/200/f00" />
</a>

Use something along these lines and hide the respective image based on the screen size. The benefit to this approach is that you can reuse those classes for other scenarios. In addition, you can avoid having to set a height on the a element.

@media screen and (min-width:481px) {
    .hidden_desktop {
        display:none;
    }
}
@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
    }
}

    CSS Howto..

    Images not showing up in correct spot [closed]

    How to fix transparent div child in parent?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    how to make button in ionic + css

    CSS how to make special div shape

    how to arrange 2 images side by side in mobile view?

    how to activate the functions of a div in css after focusing in a textbox in asp.net?

    How to Display this CSS List using Class

    How to horizontally align to “block” divs inside a div?

    How to apply css style to custom attributes

    css - how to get floated divs to stack when you zoom in

    How to wrap a div vertically and then horizontally

    How to control multiple images for a single background definition

    How to implement small text list search functionality using CSS attribute selectors

    Sencha Touch how to load custom CSS , JS if user is using PC or Tablet or SmarthPhone?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to call a CSS file from the right place

    How to float div up?

    How do I evenly space radio buttons

    how to give top property define in css for chrome or firefox

    How to give a border as a background in css without using image and without adding anything to mark-up?

    How to assign css for prettify(syntax highlighter)

    how can resize the page? [closed]

    How to stop a webpage from loading until all jQuery load functions are complete?

    How can I achieve float left at bottom and float right at top with css flexbox?

    CSS `will-change` - how to use it, how it works

    how to render tilted images in html or css or javascript ..?

    How to show something only when user prints?

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How can I stop my submenu from disappearing while hovering between spaced submenu items?