Just wondering why my media query isn't working here :s

1

I’m trying to get it to display 2 different images for 2 different screen sizes. Media query is however not working for a mysterious reason.

Please let me know how or why this happens :thinking:

Thank you in advanced :slight_smile:

2

Media query is perfectly fine. CSS comment however is not.

/*/////MEDIA QUERY @ 650PX////*/
//small: http://people.inf.ethz.ch/jebazin/CML/images/figpapers/logo_wiki_v2_small.png
//big: https://image.freepik.com/free-icon/wikipedia-logo_318-50187.jpg
3

Thanks for pointing that out, but those are deliberatly done so I don’t have to look for those images again. (I have now moved it else where to prevent confusion)

I think there’s a problem with

background-image: url(https://image.freepik.com/free-icon/wikipedia-logo_318-50187.jpg);

The rest works just fine

I want it to work something like this:

4

I don’t know why you would “deliberatly” write a blatant mistake.

I just checked your code again though, and it looks like you figured out that // is not a valid comment in CSS after you posted, so I’m guessing it was accidental not deliberate.

I’ll look some more at why your image isn’t working now that the error is taken care of.

5

The way you are going about this seems really weird and complicated. For the default screen size, you display an image and then once the screen is smaller you hide the image and then add a background image. Why don’t you just change the image instead of messing with hiding images and adding background images?

#logo{
    background-image: url(http://people.inf.ethz.ch/jebazin/CML/images/figpapers/logo_wiki_v2_small.png);
    display: block;
    width: 20px;
    height: 120px;
    width: 65%; 
    margin: 95px auto 0;
}


@media screen and (max-width:650px) {
  #logo {
    background-image: url(https://image.freepik.com/free-icon/wikipedia-logo_318-50187.jpg);
  }
}
6

Yesterday I followed the solution suggested here:

Your suggestion did help actually, now I think I need to fix it a bit more ~ almost there!

7

I finally made it!!! THANK YOU!!!

1 Like