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
Post a Comment