0

Below is the HTML tag

<div class="logo">
    <img src="{% static 'img/sunil.png' %}" id="logo"  alt="">
</div>

STYLE.CSS

what i have done in css file is below:

#logo {
    height: 60px;
    width: 120px;
}

@media only screen and (max-width: 500px) {
    .logo {
        height: 20px;
        width: 60px;
    }
}

I tried to change the image size using media queries but it is not working.

style.css is connected in main file because when I use #logo and changed height and width then its working but when I try in media queries then it's not working.

sunil ghimire
  • 505
  • 4
  • 14

3 Answers3

1

It seems like your media query is not working. Firstly, make sure you have in your head section:

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, try removing only from your media query:

#logo {
    height: 60px;
    width: 120px;
}

@media screen and (max-width: 500px) {
    #logo {
        height: 20px;
        width: 60px;
    }
}

Note you use logo id only once in a page. Here you can see the difference between screen and only screen.

Biplove Lamichhane
  • 3,995
  • 4
  • 14
  • 30
0

make sure you have meta tag in html's Head section and check if you're targetting div with class .logo or img with id #logo <meta charset="utf-8">

`<meta name="viewport" content="width=device-width, initial-scale=1">`
Bishal RaEe
  • 97
  • 1
  • 7
0

In your code "logo" is an id.

  <img src="{% static 'img/sunil.png' %}" id="logo"  alt="">

but here,

@media only screen and (max-width: 500px) {
    .logo {
        height: 20px;
        width: 60px;
    }
}

you defined as a class. try changing the .logo with #logo

Kartik_Stark
  • 1