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

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

CodePudding user response：

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  >
<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>

CodePudding user response：

.desktop-picture{display:inline-block}

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

CodePudding user response：

Use grid (or flex box) to get the images side by side. If you want some space between the images use grid-gap (leve it out if you don´t want that). To hide the second image on mobile use display: none and then display: block on desktop.

Here is an example on how you can do this whit grid:

<div >
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-mages.jpg" alt=""/>
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-images.jpg" alt="" />
</div>


    .container {
        display: grid;
        grid-gap: 1rem;
    }
    .display-none-mobile {
        display:none;
    }
     @media (min-width: 600px) {
       .container {
       /* if you want one image to take more with you ca set 2fr 1fr or 3fr 2fr */
           grid-template-columns: 1fr 1fr;
       }
       .display-none-mobile {
           display:block;
       }
    }
    /* this is so the images don't take to much width, will be applied to all images */
    img {
        max-width: 100%;
    }

CodePudding user response：

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

CodePudding user response：

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 >
  <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 >
  <img src="https://dummyimage.com/200/#ffd11/blue">
  <img src="https://dummyimage.com/200/#ffd11/blue">
</div>