Luke B February 2016

@Media for image design

I am working on a site and I have two images that need to be inline when device width is more than 425px (min-width: 425px) but for some reason it does not seem to be working how it should be and my css with the @media but it doesn't work for some reason although it is fairly basic

CODE

.info-img {
  width: 49.75%;
}
.info-images {
  display: inline-block;
  text-align: center;
}
@media screen and only (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>

Answers


dippas February 2016

The problem is because you are giving inline-block to parent instead of img, plus you are writing your media wrongly (its not @media screen and only, but @media only screen and).

Snippet

.info-images {
  font-size: 0;
  /* fix inline-block gap */
}
.info-img {
  width: 50%;
  display: inline-block;
  vertical-align:top; /* may be necessary */
  box-sizing: border-box;
  padding: 0 1%
}
@media only screen and (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>

Post Status

Asked in February 2016
Viewed 3,816 times
Voted 9
Answered 1 times

Search




Leave an answer