@Media for image design

Question

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>

Define "doesn't work". What is it giving you and what do you expect? — Becuzz, Feb 08 '16 at 17:52
At the moment when device width is more than 425 it works perfectly but when below 425 it seems to not execute the code as the images aren't 100% width and just don't look right — Luke B, Feb 08 '16 at 17:55

dippas · Accepted Answer · 2016-02-08T18:36:35.030

2

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>

edited Feb 08 '16 at 18:36

answered Feb 08 '16 at 17:54

dippas

58,591
15
114
126

this doesn't work as it doesn't go block when the browser is less than 425px – Luke B Feb 08 '16 at 17:59
You my friend are confusing us, your question say one thing (above 425px) in your 2 comments you ask below 425px, so what you really want? – dippas Feb 08 '16 at 18:02
Anywhow see my updated answer, you have your media query wrongly written. – dippas Feb 08 '16 at 18:05
Omg sorry, still learning I'm a 14 year old student whose been coding for no more than a year so still getting use to it, To confirm I want – Luke B Feb 08 '16 at 18:19
When device width is less than 425px display pictures block and when it exceeds 425px display inline-block – Luke B Feb 08 '16 at 18:19
That's how my Snippet is behaving :) let me know if this solve your issue. – dippas Feb 08 '16 at 18:21
As well I would like a small gap between the images say a pixel, could you update your code so this works – Luke B Feb 08 '16 at 18:29
when they are `inline-block` above 425px ? – dippas Feb 08 '16 at 18:30
Yeah thats all like the gap for the block view – Luke B Feb 08 '16 at 18:33
but for 'inline-block' – Luke B Feb 08 '16 at 18:35

@Media for image design

1 Answers1

Snippet