Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

Question

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

I have a row of 4 div elements aligned horizontally from left to right. Each div takes up 25% of the screen width.

I am looking for a solution to make them wrap when the user resizes the screen instead of overlapping 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 valid</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>

  [repeat m1 div blocks]

</div>

Following that div element, there is

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

Any suggestions on how to move it down when the above divs wrap?

html css

Answer 1

Answer №1

To stack them vertically, use the CSS property display: flex; in the parent with flex-direction: row; and adjust the layout to show them horizontally by changing flex-direction: column; within media queries.

.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; 
  }
}

Answer 2

To stack them vertically, use the CSS property display: flex; in the parent with flex-direction: row; and adjust the layout to show them horizontally by changing flex-direction: column; within media queries.

.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; 
  }
}

Answer 3

Answer №2

If you want the children of .MenuSett to move onto a new line at smaller viewport widths, you can add Flexbox and use flex-wrap: wrap.

Keep in mind that setting an absolute value for the width, like 250px, is necessary. This is because with width: 25%, the children will always be 25% of the parent's width no matter the viewport size, causing them to stay on one row.

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

.m1 {
  /* Children will be 25% of the parent at larger viewports */
  width: 25%;
  
  /* At viewports smaller than ~1000px, children will start wrapping due to the minimum width set */
  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>

Answer 4

If you want the children of .MenuSett to move onto a new line at smaller viewport widths, you can add Flexbox and use flex-wrap: wrap.

Keep in mind that setting an absolute value for the width, like 250px, is necessary. This is because with width: 25%, the children will always be 25% of the parent's width no matter the viewport size, causing them to stay on one row.

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

.m1 {
  /* Children will be 25% of the parent at larger viewports */
  width: 25%;
  
  /* At viewports smaller than ~1000px, children will start wrapping due to the minimum width set */
  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>

Answer 5

Answer №3

If I were to style this, I would opt for using flexbox:

.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 element .MenuSett would utilize properties like display: flex;, flex-direction: row;, and flex-wrap: wrap;, while the child elements with class .m1 would have flex: 1 without a specified width.

To ensure responsiveness, media queries could be implemented to adjust the layout based on screen size. For example:

@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%;
  }
}

Answer 6

If I were to style this, I would opt for using flexbox:

.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 element .MenuSett would utilize properties like display: flex;, flex-direction: row;, and flex-wrap: wrap;, while the child elements with class .m1 would have flex: 1 without a specified width.

To ensure responsiveness, media queries could be implemented to adjust the layout based on screen size. For example:

@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%;
  }
}

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

Answer №1

Answer №2

Answer №3

Similar questions

HTML - one div's child element takes precedence over another div

The v-for in Vue is not displaying the accurate text in the modal window and is only showing the data for the first item

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

The Masonry Grid is leaving empty spaces unfilled

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

Integrate CSS and JavaScript files into Node Express

What is the best way to link various stylesheets to a Rails project?

What is the best way to align my content alongside my sidebar?

Using setTime in JavaScript allows for customizing and adjusting the

Can 'fr' units be used in the `calc()` function of CSS?

Increased spacing HTML

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

What is the best way to close the space between a box-shadow and a div background when incorporating semi-transparent rgba() values?

a fixed width layout with two columns aligned at the top

How to handle Component binding change events in AngularJS

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Integrating fresh models into Django and creating dedicated pages for each

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

What is the best way to ensure email address validation is done perfectly every time?