0

This is a menu I made using html and css. As you can see we have 3 boxes. I want all of the boxes to have the same height. I can't use Flexbox cause the following rule must be applied. I used 12 grid framework to make the webpage responsive for desktops, tablets, and mobile. The 3 boxes are each specified to take 33.33% of the width when the width of the screen is more than 992px. If the screen width is between 991px and 768px the first two boxes must take 50% of the width and the third box take the whole width of the screen. And if the screen width is less than 767px each box must take 100% of the width.

/* Base style */
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: fantasy, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 40px;
}

.container {
  position: relative;
  margin: 15px;
}

.row {
  width: 100%;
}

section > div {
  position: relative;
  top: 0px;
  border: 2px solid black;
  background-color: rgb(250, 255, 190);
  margin: 15px;
  padding: 10px;
}

div > p {
  text-align: justify;
  margin-top: 50px;
  font-size: 100%;
}

label {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  text-align: center;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

h3 {
  margin: 15px 0px 15px 0px;
}

#title-1 {
  background-color: #9f7b59;
  color: #fff0dc;
}

#title-2 {
  background-color: #a76e69;
}

#title-3 {
  background-color: #0c1b44;
  color: #8e8c6a;
}
/* Desktop */
@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <title>Coursera Module 2 Assignment</title>
  </head>
  <body>
    <header>
      <h1>Menu!</h1>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-1"><h3>Chicken</h3></label>
              <p>
                Chicken is the most common type of poultry in the world. Owing
                to the relative ease and low cost of raising chickens in
                comparison to mammals such as cattle or hogs chicken meat and
                chicken eggs have become prevalent in numerous cuisines.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-2"><h3>Beef</h3></label>
              <p>
                Beef is the culinary name for meat from cattle. In prehistoric
                times, humankind hunted aurochs and later domesticated them.
                Since that time, numerous breeds of cattle have been bred
                specifically for the quality or quantity of their meat.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-12 col-sm-12">
            <div>
              <label id="title-3"><h3>Sushi</h3></label>
              <p>
                Sushi is a Japanese dish of prepared vinegared rice, usually
                with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood often raw and vegetables. Styles of
                sushi and its presentation vary widely, but the one key
                ingredient is "sushi rice", also referred to as shari, or
                sumeshi.
              </p>
            </div>
          </section>
        </div>
      </div>
    </main>
  </body>
</html>

I tried using Flexbox, but that makes all boxes show in the same row/column, and the rule defined for responsive web won't apply anymore.

Udhay Titus
  • 5,761
  • 4
  • 23
  • 41
Shaakie
  • 1
  • 3
  • you talk a lot about the width. What has the width to do with the height? What have you tried so far? What differs from the answers you got when you asked the question 3 days ago (that you deleted afterward)? – tacoshy May 15 '23 at 06:47
  • The methods I got didn't solve my problem. I tried setting the flex-shrink and flex-grow to 0. that didn't work. tried display grid or creating a table and they didn't response as I wanted. – Shaakie May 15 '23 at 06:56

2 Answers2

1

Use CSS-Grid for that.

If you use grid-auto-rows: 1fr then all rows will have the same height (the height of the tallest row). The number of columns you can define with grid-template-columns which will equally divide the space:

.row { 
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
}

@media only screen 
  and (min-width: 768px) {
    .row {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen 
  and (min-width: 992px) {
    .row {
      grid-template-columns: repeat(3, 1fr);
    }
}
<div class="row">
  <section class="col-lg-4 col-md-6 col-sm-12">
    <div>
      <label id="title-1"><h3>Chicken</h3></label>
      <p>
        Chicken is the most common type of poultry in the world. Owing to the relative ease and low cost of raising chickens in comparison to mammals such as cattle or hogs chicken meat and chicken eggs have become prevalent in numerous cuisines.
      </p>
    </div>
  </section>
  <section class="col-lg-4 col-md-6 col-sm-12">
    <div>
      <label id="title-2"><h3>Beef</h3></label>
      <p>
        Beef is the culinary name for meat from cattle. In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat.
      </p>
    </div>
  </section>
  <section class="col-lg-4 col-md-12 col-sm-12">
    <div>
      <label id="title-3"><h3>Sushi</h3></label>
      <p>
        Sushi is a Japanese dish of prepared vinegared rice, usually with some sugar and salt, accompanied by a variety of ingredients, such as seafood often raw and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi
        rice", also referred to as shari, or sumeshi.
      </p>
    </div>
  </section>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • I tried adding this to my code and nothing changed. – Shaakie May 15 '23 at 07:56
  • Then provide your entire code to be reproducible. It clearly is working here. Alternatively, remove the classes to not use your framework in this grid. – tacoshy May 15 '23 at 07:59
-1

The flex layout can't achieve the same height of multiple lines, so I readjusted it with the grid layout. Thank you @tacoshy for reminding me. I hope this answer can help you.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: fantasy, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 40px;
}

.container {
  position: relative;
  margin: 15px;
}



section {
  padding: 8px;
}

section > div {
  position: relative;
  top: 0px;
  border: 2px solid black;
  background-color: rgb(250, 255, 190);
  height: 100%;
  padding: 8px;
}

div > p {
  text-align: justify;
  margin-top: 50px;
  font-size: 100%;
}
.item1 {
  grid-area: a;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}

.row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'a b c';
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 'a b' 'c c';
  }
}

/* Mobile */
@media (max-width: 767px) {
  .row {
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 'a' 'b' 'c';
  }
}

label {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  text-align: center;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

h3 {
  margin: 15px 0px 15px 0px;
}

#title-1 {
  background-color: #9f7b59;
  color: #fff0dc;
}

#title-2 {
  background-color: #a76e69;
}

#title-3 {
  background-color: #0c1b44;
  color: #8e8c6a;
}
<header>
      <h1>Menu!</h1>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <section class="item1">
            <div>
              <label id="title-1"><h3>Chicken</h3></label>
              <p>
                Chicken is the most common type of poultry in the world. Owing
                to the relative ease and low cost of raising chickens in
                comparison to mammals such as cattle or hogs chicken meat and
                chicken eggs have become prevalent in numerous cuisines.
              </p>
            </div>
          </section>
          <section class="item2">
            <div>
              <label id="title-2"><h3>Beef</h3></label>
              <p>
                Beef is the culinary name for meat from cattle. In prehistoric
                times, humankind hunted aurochs and later domesticated them.
                Since that time, numerous breeds of cattle have been bred
                specifically for the quality or quantity of their meat.
              </p>
            </div>
          </section>
          <section class="item3">
            <div>
              <label id="title-3"><h3>Sushi</h3></label>
              <p>
                Sushi is a Japanese dish of prepared vinegared rice, usually
                with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood often raw and vegetables. Styles of
                sushi and its presentation vary widely, but the one key
                ingredient is "sushi rice", also referred to as shari, or
                sumeshi.
              </p>
            </div>
          </section>
        </div>
      </div>
    </main>
Sky Clong
  • 141
  • 1
  • 8
  • how does this answer the question? The question is how to make all the boxes equal in height. – tacoshy May 15 '23 at 07:30
  • @tacoshy Do you try to add or modify these styles, if you try, you will find that the height of each box is equal, because conatiner is a flex layout. – Sky Clong May 15 '23 at 07:38
  • It does not: https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container It only works when all the content is within the same row. Other rows caused by `flex-wrap` will adjust the height to their content not to the largest row. – tacoshy May 15 '23 at 07:41
  • em...you are right! Thanks for pointing out a problem I didn't see – Sky Clong May 15 '23 at 07:48