Home Display block and height not working for image
Reply: 1

Display block and height not working for image

Toms Eglite
1#
Toms Eglite Published in 2017-12-07 23:58:17Z

So I want my image to be automatically resized when screen resolution is under 740 pixels. This code is outside @media.

header img {
  display: block;
  height: 150px;
  margin: auto;
}

@media screen and (max-width: 740px) {
  header img {
    display: block;
    width: 100%;
    height: auto;
  }
}
<header>
  <img src="https://images.vexels.com/media/users/3/137694/isolated/lists/35e10823069d1767521320dc34475465-triangle-logo-geometric.png">
</header>

This code is not working! Why? When I check the code in chrom dev tools, these properties are deleted out except width:100%;!

Nerds of Technology
2#
Nerds of Technology Reply to 2017-12-08 00:01:57Z

The first definition is the default style. Add !important to enforce the screen style

@media screen and (max-width: 740px){
   header img{
       height:auto !important;
   }
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315603 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO