CODEWITHSUNDEEP
htmlcss
lf80
lf80

Reputation: 483

Organize responsive images on desktop and mobile layouts

I'm trying to align two images side by side - pair after pair down by landing page on wide screen and single image - one after another on mobile screen layout:

<div  class="container">
    <div class="set">
      <div class="column">
        <img src="" id="img3" class="images">
      </div>
      <div class="column">
        <img src="" id="img4" class="images">
      </div>
      <div class="column">
        <img src="" id="img5" class="images">
      </div>
      <div class="column">
        <img src="" id="img6" class="images">
      </div>
    </div>
  </div>

container css:

  .container { 
      height: relative; 
      padding: 0px 12px;
      margin-top:0px;
      margin-bottom:0px;
      border-radius: 0px;
      background-color: transparent; 
    }

set and column css:

* {
  box-sizing: border-box;
}

.set {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

images css:

 .images {
      position: relative;
      width: 100%;
      height: auto;
      padding: 23px;
    }

Actual result is a scalable images in one line with both screen layouts, left is a wide screen, right is mobile:

enter image description here

but I'm trying to get this result:

enter image description here

Upvotes: 1

Views: 167

Answers (1)

Vansh Sachdeva
Vansh Sachdeva

Reputation: 148

You just need to give one more parameter in your css file

@media screen and (max-width:768px){
     .set{display:block}
}

Upvotes: 1

Related Questions