html - @Media for image design -


i working on site , have 2 images need inline when device width more 425px (min-width: 425px) reason not seem working how should , css @media doesn't work reason although basic

code

.info-img {    width: 49.75%;  }  .info-images {    display: inline-block;    text-align: center;  }  @media screen , (max-width: 425px) {    .info-img {      width: 100%;      padding-bottom: 1px;    }    .info-images {      display: block;      text-align: center;    }  }
<div class="info-images">    <img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">    <img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">  </div>  </div>  <style type="text/css">    @import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');  </style>

the problem because giving inline-block parent instead of img, plus writing media wrongly (its not @media screen , only, @media screen and).

snippet

.info-images {    font-size: 0;    /* fix inline-block gap */  }  .info-img {    width: 50%;    display: inline-block;    vertical-align:top; /* may necessary */    box-sizing: border-box;    padding: 0 1%  }  @media screen , (max-width: 425px) {    .info-img {      width: 100%;      padding-bottom: 1px;    }    .info-images {      display: block;      text-align: center;    }  }
<div class="info-images">    <img src="//lorempixel.com/1600/900" class="info-img">    <img src="//lorempixel.com/1600/900" class="info-img">  </div>


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -