When it goes down below 1200 ish px this is the results but I want it to make it look like in the 2nd Picture when it goes down 1200px. I used flex-wrap btw. I want to change this

2nd pic

.boxes {
    margin-top:1em;
    height:30em;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    .box1 {
        margin-top:2em;
        height:23em;
        width:18em;
        border-radius: 0.5em;
        text-align: center;
        p {
            font-size:1.5rem;
        }
        .box1-pic {
            background-image: url(../Svg/camera-svgrepo-com.svg);
            background-size: cover;
            height:10em;
            width:10em;
            margin-left:5em;
        }
    }
    .box2 {
        margin-top:2em;
        height:23em;
        width:18em;
        border-radius: 0.5em;
        background-color:rgba(11, 255, 72, 0.61);
    }
    .box3 {
        margin-top:2em;
        height:23em;
        width:18em;
        border-radius: 0.5em;
        background-color:rgb(0, 83, 7);
    }
    .box4 {
        margin-top:2em;
        height:23em;
        width:18em;
        border-radius: 0.5em;
        background-color:rgb(3, 3, 3);
    }
}

CodePudding user response：

First add the width of boxes between 35-40% and then give property justify content space-around

• Width:40%

• Justify-content: space-around

                                          OR
  

Add First two boxes in seperate div

and Another two in seperate div

CodePudding user response：

Would this work for you? https://codepen.io/panchroma/pen/ZEXwjyO

The important bit is

/* customise viewport width below 
 to specify when layout changes to columns that are 50% wide */

@media (max-width: 1350px) { 
  .boxes > * {
    flex: 0 0 50%;
  }
}  

Full HTML

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>  

Full SCSS

.boxes {
  margin-top: 1em;
  height: 30em;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .box1 {
    margin-top: 2em;
    height: 23em;
    width: 18em;
    border-radius: 0.5em;
    text-align: center;
    p {
      font-size: 1.5rem;
    }
    .box1-pic {
      background-image: url(../Svg/camera-svgrepo-com.svg);
      background-size: cover;
      height: 10em;
      width: 10em;
      margin-left: 5em;
    }
  }
  .box2 {
    margin-top: 2em;
    height: 23em;
    width: 18em;
    border-radius: 0.5em;
    background-color: rgba(11, 255, 72, 0.61);
  }
  .box3 {
    margin-top: 2em;
    height: 23em;
    width: 18em;
    border-radius: 0.5em;
    background-color: rgb(0, 83, 7);
  }
  .box4 {
    margin-top: 2em;
    height: 23em;
    width: 18em;
    border-radius: 0.5em;
    background-color: rgb(3, 3, 3);
  }
}

@media (max-width: 1350px) {
  .boxes > * {
    flex: 0 0 50%;
  }
}