CODEWITHSUNDEEP
htmlcssdjangomedia-queries
sunil ghimire
sunil ghimire

Reputation: 545

why media queries is not working with django css styling?

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.

Upvotes: 0

Views: 1632

Answers (3)

Kartik_Stark
Kartik_Stark

Reputation: 1

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

Upvotes: 0

Biplove Lamichhane
Biplove Lamichhane

Reputation: 4095

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.

Upvotes: 1

Bishal RaEe
Bishal RaEe

Reputation: 97

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">`

Upvotes: 0

Related Questions