CODEWITHSUNDEEP
cssmedia-queries
Cineno28
Cineno28

Reputation: 909

Replace image with media query not working

I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.

I am trying the technique I found here: @media queries and image swapping

My custom.css file has this code:

.test-mobile-logo{
   display: none;
}

@media only screen and (max-width: 500px){           
    .test-main-logo{
     display: none;
   }

   .test-mobile-logo{
     display: block;
   }
}

My html file has this code for the logo:

<div class="logo"> 
                <a href="index.html" >
                    <img src="images/logo-dark.png" alt="" class="test-main-logo">
                    <img src="images/logo-main.png" alt="" class="test-mobile-logo">
                </a> 
            </div>

The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.

The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css

I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?

Upvotes: 1

Views: 1600

Answers (3)

Tom Maton
Tom Maton

Reputation: 1594

I agree with @HenrikhKantuni use a background image and change the background image in the css media query.

Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.

Upvotes: 1

kantuni
kantuni

Reputation: 971

as @VincentOrback mentioned just delete the !important from img selector

Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites

Upvotes: 0

Vincent Orback
Vincent Orback

Reputation: 2397

You have this style in your css that overrides your display styles.

img {
  display: inline-block !important;
}

Remove the !important to make your media-query work.

Upvotes: 3

Related Questions