Question 189825 in Html Question posted in
Some basic documentation can be found here.

Html – How to stretch flexbox across phone

I’m trying to make 4 boxes appear in two ways

  1. On PC/a large display have all 4 boxes an equal size taking up 25% of the page each

  2. On smaller displays (once the boxes start overlapping each other), have the boxes shown in a column, with each box expanding to fill the width of the screen.

<div class="flex-container">
<p id="box" style="text-align: center;"><strong><a >Box 1</a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 2</a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 3 </a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 4 </a></strong></p>
</div>

.flex-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   align-items: stretch;
}
@media screen and (max-width: 600px){
   .flex-container{
      flex-direction: column;
   }
}

  #box{
    border: 15px solid blue;
  padding: 15px; 
}
Tags:

2

Answers


  1. 0 
      .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .box {
    border: 15px solid blue;
    padding: 15px;
  }

  @media screen and (max-width: 600px) {
    .flex-container {
      flex-direction: column;
    }
  }
    <div class="flex-container">
  <p class="box" style="text-align: center;"><strong><a>Box 1</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 2</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 3</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 4</a></strong></p>
</div>

    In this code, I replaced the duplicate id="box" attributes with class="box". Then, I used the .box class selector in the CSS code to target those elements. This ensures that the styling is applied consistently to all the boxes.

    Login or Signup to reply.
  2. 0

    First of all you cannot have more than one element with the same id in an HTML document. So change all the ids(box) to class.

    Add .box{width: 100%} or 25% above the media-query. It will make the box share same width in desktop.

    /*Add this to make sizing easier*/
*{
  box-sizing: border-box;
}

.flex-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   align-items: stretch;
}
/* moved box's style here*/
.box{
  width: 100%;
  border: 15px solid blue;
  padding: 15px; 
}
@media screen and (max-width: 600px){
   .flex-container{
      flex-direction: column;
   }
}
    <div class="flex-container">
<p class="box" style="text-align: center;"><strong><a >Box 1</a></strong></p>
<!-- changed id to class -->
<p class="box" style="text-align: center;"><strong><a >Box 2</a></strong></p>

<p class="box" style="text-align: center;"><strong><a >Box 3 </a></strong></p>

<p class="box" style="text-align: center;"><strong><a >Box 4 </a></strong></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search