How to 4 side by side image using html to Mobile view vertical and Desktop view Horizontal-CodePudding

I have 4 images on my website that I want to display horizontally on desktop and vertically on mobile. (I just started learning HTML so I basically know nothing about coding)

The only thing I could think of was to find a way to set that a number of images will align themselves next to each other as long as there's room for them.

Please tell me if there is any simple way to set this up.

CodePudding user response：

Simply use flexbox. Then add @media-queries to address screens with a limited width and change the flex-direction there to column while the default is row.

div {
  display: flex;
}

img {
  width: 25%;
}


@media only screen
  and (max-width: 568px) {
    div {
      flex-direction: column;
    }
    
    img {
      width: 100%;
    }
}
    

/* for visualisation only */
img {display: block;}

<div>
  <img src="https://via.placeholder.com/300x200.jpg/FF0000">
  <img src="https://via.placeholder.com/300x200.jpg/00FF00">
  <img src="https://via.placeholder.com/300x200.jpg/0000FF">
  <img src="https://via.placeholder.com/300x200.jpg/FFFF00">
</div>

CodePudding user response：

You can use the tranform css method to solve this, "transform: rotate(90deg);". Here is a link to help you more: https://www.w3schools.com/cssref/css3_pr_transform.asp and then add a media query code in the css where the transform property for mobile would be 90deg. Here is a link to help you with the media query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp