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

Html – I need help spacing my divs for 3 different media queries

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

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

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

These were the instructions:

  • When width >= 992, each box should take up a third of the width of the screen
  • When width between 768 & 991, first two boxes take 50% of the width of the screen and the third box should take up 100% of the width on the next line
  • When width < 768, each box takes up 100% of the width so there should be 3 separate lines

I gave the divs ids of "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%;
  }
}

The sizes of the divs aren’t changing when I resize the browser window and I don’t know how to fix it. I got this assignment from a Coursera course and I rewatched the videos on media queries and other related stuff but I haven’t made any progress.

Tags:

2

Answers


  1. 0

    You need to put ‘px’ after your values in min and max width

    @media (min-width: 768px) and (max-width: 991px) {}
    Login or Signup to reply.
  2. 0

    I would recommend to use a container div to control the flex layout as shown in the next demo:

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

    I also recommend to build your layout from small screens to larger screens (mobile first) and set only @media (min-width) css queries. Consider that larger media queries override previous small queries only if they are setted.

    Here 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search