CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queriesmargin
omeniel
omeniel

Reputation: 13

How can I get my layout boxes to wrap responsively?

I am currently studying HTML, CSS, and JS on Coursera. I have been given the assignment to reproduce a responsive webpage using very simple HTML and CSS without using frameworks, grid, flex, and JS. I have mostly finished coding the page, but now I am stuck with two problems that, I believe, are connected to margins and viewport. The page should respond to the size of the screen like that:

  1. Desktop: the three boxes should each take a third of the page horizontally
  2. Tablet: the first two boxes should take the half of the screen and the third should take 100% of the next line
  3. Mobile: the three boxes should stack

I can recreate the Desktop and Mobile view but not the Tablet. In my Tablet view, the third covers the first two. I am using media queries for that. I have attached my HTML and CSS code.

And the other problem has something to do with margins. I need to apply even spacing between the boxes. However, when I use margins in Desktop view, the third box drops on the next line. So, I have omitted them. Here is a link to the task on GitHub https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md in case my explanation is not clear.

Thanks in advance. I am a noob but I want to learn and improve.

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

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
    float: left;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
    float: left;
  }
  div#box2.box {
    width: 50%;
    float: left;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="container">
    <div id="box1" class="box">
      <div class="label">
        <h3 id="label1">Chicken</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div>

    <div id="box2" class="box">
      <div class="label">
        <h3 id="label2">Beef</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div>

    <div id="box3" class="box">
      <div class="label">
        <h3 id="label3">Sushi</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div>

  </div>
</body>

Upvotes: 1

Views: 171

Answers (1)

isherwood
isherwood

Reputation: 61083

We can make your code work with two things:

  • Convert all instances of float to inline-block display
  • Remove whitespace between the three .box elements in the markup

However, I'd look at using flexbox or grid for a modern solution.

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

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  display: inline-block;
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
  }
  div#box2.box {
    width: 50%;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="container">
    <div id="box1" class="box">
      <div class="label">
        <h3 id="label1">Chicken</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div><div id="box2" class="box">
      <div class="label">
        <h3 id="label2">Beef</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div><div id="box3" class="box">
      <div class="label">
        <h3 id="label3">Sushi</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </p>
    </div>

  </div>
</body>

Upvotes: 1

Related Questions