CODEWITHSUNDEEP
htmlcss
sheko
sheko

Reputation: 556

Align 4 divs to be 2 per row at smaller viewport widths

I have 4 divs aligned horizontally from left to right. Each div is 25% width of the screen.

I need to make them wrap when the user minimizes the screen instead of glitching above each other.

.MenuSett {
  margin-top: 10px;
  width: 100%;
  position: relative;
  height: 120px;
  color: #0ddF00;
  display: inline-block;
}

.m1 {
  width: 25%;
  margin: auto;
  text-align: center;
  float: left;
}
<div class="MenuSett">

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>


  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

</div>

Below that div there is 

.belowDiv {   
   position: relative;  
   height:350px;
 }

How to push it down when the div above wraps ?????

Upvotes: 1

Views: 690

Answers (3)

jeprubio
jeprubio

Reputation: 18002

I would use flex:

.MenuSett{  
  margin-top:10px;
  width: 100%;
  position: relative; 
  height: 120px;  
  color: #0ddF00;
  display: inline-block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} 

.m1 { 
   flex: 1; 
   margin: auto;
   text-align: center;    
   float: left;
}

The parent .MenuSett would have display: flex;, flex-direction: row; & flex-wrap: wrap; and the children .m1 would have flex: 1 and without the width set.

But you might also do some media queries as at some minimal screen width having 4 columns at the same time could be too much. Like this ones:

@media screen and (max-width: 500px) {
  .m1 { 
   flex: 1 0 100%;
  }
}
@media screen and (min-width: 700px) {
  .m1 { 
    flex: 1 0 50%;
  }
}

@media screen and (min-width: 900px) {
  .m1 { 
    flex: 1 0 25%;
  }
}

Upvotes: 1

Walteann Costa
Walteann Costa

Reputation: 67

if you want them to be below each other you display flex in parent with flex-direction: row; and media queries change flex-direction to column flex-direction: column;

.MenuSett{  
  margin-top:10px ;
  width: 100%;
  position: relative; 
  height: 120px;  
  color: #0ddF00;
  display: flex;
  flex-direction: row; 
} 

.m1 { 
   width: 25%;   
   margin: auto;
   text-align: center;    
   float: left;
} 


@media only screen and (max-width: 600px) {
  .MenuSett{ 
    flex-direction: column; 
  }
}

Upvotes: 2

khan
khan

Reputation: 1464

You can add Flexbox to .MenuSett and use flex-wrap: wrap to get its children to go onto a new line at smaller viewport widths.

Note that you would need to set an absolute value for the width, such as 250px. This is because with width: 25%, regardless of the viewport width, the children will always be 25% of its parent, thus always displaying them on one row.

.MenuSett {
  margin-top: 10px;
  width: 100%;
  position: relative;
  height: 120px;
  color: #0ddF00;
  
  /* Introduce Flexbox to parent */
  display: flex;
  
  /* Allow children to wrap to the next line */
  flex-wrap: wrap;
}

.m1 {
  /* At larger viewports, children will be 25% of parent */
  width: 25%;
  
  /* At viewports smaller than ~1000px, children will start
     wrapping because they have a minimum width set. Change
     this value as needed. */
  min-width: 250px;
  
  margin: auto;
  text-align: center;
  float: left;
}
<div class="MenuSett">

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>


  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions