Replace image with media query not working

Question

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?

[-click- suggestion to test your website](http://troy.labs.daum.net/) — L777, Feb 22 '16 at 20:22

score 3 · Accepted Answer · answered Feb 22 '16 at 20:20

3

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.

answered Feb 22 '16 at 20:20

Vincent Orback

2,327
22
35

@OP the **!important** clause can cause all sorts of unintended side effects like this, and should be strictly avoided, unless you have a good reason. – Bosworth99 Feb 22 '16 at 20:24
Thank you! I'm still learning CSS so that helped a lot! Thank you too @Bosworth99 for the additional comment – Cineno28 Feb 22 '16 at 20:33
Make sure removing it doesnt break something else on you site. Good luck learning! :) – Vincent Orback Feb 22 '16 at 20:43

score 1 · Answer 2 · answered Feb 23 '16 at 08:32

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.

score 0 · Answer 3 · answered Feb 22 '16 at 20:29

0

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

answered Feb 22 '16 at 20:29

Henrikh Kantuni

901
11
14

Replace image with media query not working

3 Answers3