JLH JLH - 2 months ago 8
CSS Question

responsive CSS layout, wanting to make one column a different width than the others

I am stuck on one part of a question for a homework assignment. We're producing 3 responsive layouts (I called them lg, md, xs) for a simple site consisting of 3 boxes. We are not allowed to use bootstrap for this. You can see my implementation so far here: https://jennlhay.github.io/coursera-test/assn1/index.html

On the medium sized layout, meant for tablet devices (you can see it by resizing the box), the 3 box layout wraps around. I'm trying to figure out how to make the third box take up an entire row. As in, take up a different area of the grid than the 2 boxes above it. I've tried many different ways of doing this (changing the container divs to individual ids, adding some extra column definitions to css for col-md etc) but can't figure it out. HTML and CSS are as follows:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="left">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.</p></div></div>
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</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.</p></div></div>
<div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</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. </p></div></div>
</div>
</html>


CSS

* {
box-sizing: border-box;
}

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

h1 {
text-align: center;
font-size: 175%;
margin-bottom: 30px;
}

h2 {
position: relative;
float: right;
border: 1px solid black;
margin: 0;
padding: 10px;
font-size: 125%;
}

#left {
background-color: white;
}

#middle {
background-color: blue;
}

#right {
background-color: gray;
}

.container {
border: 1px solid black;
background-color: yellow;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-bottom: 10%;
overflow: hidden;
}

p {
padding-top: 15px;
font-size: 100%;
clear: right;
}

.row {
width: 100%;
}

@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: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}

@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: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}

@media (max-width: 767px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
}
.col-xs-1 {
width: 8.33%;
}
.col-xs-2 {
width: 16.66%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.33%;
}
.col-xs-5 {
width: 41.66%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.33%;
}
.col-xs-8 {
width: 66.66%;
}
.col-xs-9 {
width: 74.99%;
}
.col-xs-10 {
width: 83.33%;
}
.col-xs-11 {
width: 91.66%;
}
.col-xs-12 {
width: 100%;
}
}

Answer

Are you trying to make the third row full width in a medium sized screen? If so you would just change change the col-md class from:

        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</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. </p></div></div>

to:

        <div class="col-lg-4 col-md-12 col-xs-12"><div class="container"><h2 id="right">Eggs</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. </p></div></div>