'How to place two img next to each other for desktop but only one for mobile

For mobile there should only be one image showing, but for desktop there should be two img next to each other. The two images are in one section but separated in their own div. Picture of HMTL section here with the images How do I show the second image on desktop and still place them next to each other. I have tried using float but then it cancels the display: block and the second image won't show. Picture of my CSS styling using @Media queries

htmlcssimagecss-floatandroidandroid-jetpack-composelazycolumn


Solution 1:[1]

Our CSS codes will be as follows. img css :

img {
height: auto;
max-width: 100%;
}
.image-table {
border: 0px solid rgba(0, 0, 0, 0);
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
text-align: center;
width: 100%;
}
.image-table img {
border: 10px solid #fff;
box-sizing: border-box;
-webkit-box-shadow: 0 0 10px #999;
box-shadow: 0 0 10px #999;
}
#sec-profil .col-md-3{          
    clear: both !important;
}

Our HTML codes are as follows.

<table  class="image-table">
<tbody>
<tr>
<td>
<img id="sec-profil"  src="img-link-1" alt="" title="">
</td>
<td>
<img  id="sec-profil"  src="img-link-2" alt="" title="">
</td>
<td>
<img  id="sec-profil"  src="img-link-3" alt="" title="">
</td>
</tr>
</tbody>
</table>

Solution 2:[2]

I would strongly advise against using float's. Here is an example using flex and flex-flow with a media query changing to flex-flow: row; to align images side by side.

.parent {
  display: flex;
  flex-flow: column;
  width: 50%;
  margin: auto;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 600px) {
  .parent {
    flex-flow: row;
    justify-content: center;
  }
}
<div class="parent">
  <img src="https://dummyimage.com/200/#ffd11/blue">
  <img src="https://dummyimage.com/200/#ffd11/blue">
</div>

Another example w/ grid.

.parent {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 600px) {
  .parent {
    grid-template-columns: 1fr 1fr;
  }
}
<div class="parent">
  <img src="https://dummyimage.com/200/#ffd11/blue">
  <img src="https://dummyimage.com/200/#ffd11/blue">
</div>

Solution 3:[3]

Make sure that .desktop-picture is set to display: none; by default, then set it to display: inline; in the media query.

Solution 4:[4]

Remove floats and apply inline block to the div in your styles, your images will be inline.

.desktop-picture {
  display:inline-block
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Barış Karapelit
Solution 2 Kameron
Solution 3 Zach Jensz
Solution 4 Zach Jensz

Related Questions