I need help spacing my divs for 3 different media queries

Question

Here is the codpen link with the code: https://codepen.io/gregelious/pen/zYmLGex

This is a restaurant menu with 3 categories (divs) as 3 separate boxes.

(Detailed instructions here: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

These are the instructions:

• When width >= 992, each box should occupy one third of the screen width
• When the width is between 768 and 991, the first two boxes occupy 50% of the screen width, and the third box should occupy 100% of the next line width
• When width < 768, each box takes up 100% of the width, so there should be 3 separate lines< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

I gave the div ids for "first", "second" and "third" and this is my css:

@media (min-width: 992) {
  div {
    width: 33.33%;
  }
}

@media (min-width: 768) and (max-width: 991) {
  #first, #second {
    width: 50%;
  }
  #third {
    width: 100%;
  }
}

When I resize the browser window, the size of the div doesn't change and I don't know how to fix it. I received this assignment from a Coursera course and re-watched the video on media queries and other related stuff but made no progress.

Answer 1

I recommend using a container div to control Flex layout, as shown in the next demo:

You have to make the layout work, which is what you do with the flex properties (update, you need to set the units to min-width and max- width attribute, for example px : min-width: 768px)

I also recommend building layouts from small to large screens (mobile first) and setting only the @media (min-width) css query. Consider that only if a larger media query is set, the larger media query will overwrite the previous smaller query.

This is a working demo:

body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

div {
  float: left;
}

section {
  background-color: gray;
  border: 1px solid black;
  margin: 10px;
}

section h2 {
  background-color: blue;
  border: 1px solid black;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 2px;
  padding-right: 30px;
  padding-left: 30px;
  display: inline;

  float: right;
}

section p {
  clear: right;
  padding: 0px 10px 10px 10px;
}

/** added code */
.container {
  display: flex;
  flex-wrap: wrap;
}

.menu {
  width: 100%;
}

@media (min-width: 768px) {
  .menu {
    width: 50%;
  }
  
  .flow {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .menu, .flow {
    width: 33.333%;
  }
}

<h1>Our Menu</h1>

<div class="container">
  <div id="first" class="menu">
    <section>
      <h2>Chicken</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="second" class="menu">
    <section>
      <h2>Beef</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="third" class="menu flow">
    <section>
      <h2>Sushi</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>
</div>