only screen and (min-width: 0px) and (max-width: 327px) not work

Question

responsive in html and div tag is not work.

my head code is

<link media="only screen and (min-width: 0px) and (max-width: 327px)" rel="stylesheet" type="text/css" href="mobile.css">

and my body code is

<div id="div1">

    <div class="he" style="background-color: #65a82a; height: 40px: 10px " >
        <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;">   لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span>
    </div>
    <div class="ad" style="text-align: left;margin: 18px">
        <a href="<?php echo $imgsrc[0]; ?>"> <span style="color: black;font-size: 17px"> https://pic.leanilo.com/wp-content/uploads/2019/03/1553530968n8g4k.jpg </span></a></div></div>

and tablet.css code is

.he{background-color: red; height: 55px;margin: 10px}

Answer 1

Specificity of CSS rules at play here. You can see in your inspector the rule you wanted is crossed out and the other rule is instead applied. This is because inline styles outweigh ordinarily declared class selectors. To fix move the inline style off of the style attribute on the image, and move those styles to your stylesheet. Then your media query should override at the correct width.

For example, in this snippet you can see that the div with class .he has a background color of red in the CSS rule, but when you run the snippet the background is green because you have a style attribute on that element with the green background color ( style="background-color: #65a82a; height: 2.8vmax;margin: 10px " ).

 .he { background-color: red; height: 55px; margin: 10px; } 

 <div class="he" style="background-color: #65a82a; height: 2.8vmax;margin: 10px " > <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;"> لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span> </div> 

This is called inline styles and the inline styles win in the case where they are targeting rules that are also declared in the CSS. The media queries will work the same way.

To fix the problem move the styles out of the HTML and into CSS, then you will have a more expected result:

 .he { background-color: #65a82a; height: 40px: } .ac { margin: 10px 7px 5px 3px; color: white; font-size: 3vmax; } @media only screen and (max-width: 327px) { .he { background-color: red; /* these styles now applied */ height: 55px; margin: 10px; } } 

 <div class="he"> <span class="ac"> لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span> </div> 

Run the snippet and change your screen size to see the media query working.