Very first post, please forgive me and advise me on what is incorrect in regards to posting here, and thank you very much.
Trying to make simple site from example for Coursera course "HTML, CSS, and Javascript for Web Developers." I will post the objectives and image that have been given first, then my html/css, and then the second version which is a complete mess (please advise how to do this better in future posts if needed. No Bootstrap or any other frameworks are permitted in this project.
Attempting to make page fully responsive as it is shrunk down, instead of just using specific pixel sizes for each media size. Ignore the other most-likely errors in font-sizes etc (unless you feel like giving me advice on everything I'm doing wrong, which I would welcome). The focus is getting the "row" of three-wide containers 100% width to drop down to two rows with 2 containers 100% width in first row, and 1 container 100% width in second row. Then scale down again to three rows with 1 container 100% wide in each. All of this is in better detail in the project objectives linked below.
The other issue I'm having is excess space on right side after last container in the current version when I can't find what is causing it as I have margins set to 0 and width of container set to 100%.
I have tried creating a css grid by specifying different col classes and a base width for them all, then having the @media change these with no change.
PROJECT INSTRUCTIONS (found at https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="container">
<!-- Chicken Container -->
<div id="op-1" class="menu">
<div class="food-type chicken">Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu">
<div class="food-type beef">Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu">
<div class="food-type sushi">Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
My CSS
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================
My CSS Styles
=============================================== */
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway; roboto; ransita; sans-serif;
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
#container {
width: 100%;
max-width: 100%;
margin: 0px;
padding: 10px;
/*display: flex;
justify-content: space-between; */
}
.menu {
float:left;
width:30%;
margin: 10px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
/*
div.foo {
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
*/
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 30%;
position: relative;
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
@media all (min-width: 992px) {
.menu {width: 33.33%;}
}
@media all (min-width: 768px) and (max-width: 991px) {
#op-1.menu #op-2.menu {width: 50%;}
#id-3.menu {width: 100%;}
}
@media all (max-width: 767px) {
.menu {width: 100%;}
}
Version 2 Attempt with CSS Grid- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles2.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="grid-container">
<!-- Chicken Container -->
<div id="op-1" class="menu col-2 col-3 col-6">
<div class="food-type chicken">
Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu col-2 col-3 col-6">
<div class="food-type beef">
Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu op-3 col-2 col-3 col-6">
<div class="food-type sushi">
Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
CSS:
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================
My CSS Styles
=============================================== */
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway; roboto; ransita; sans-serif;
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
.menu {
float:left;
width:30%;
margin: 0px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 30%;
position: relative;
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
.grid-container {
width: 100%;
max-width: 100%;
padding: 12px;
}
/*
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
*/
[class*='col-'] {
float: left;
min-height: 1px;
width: 33.33%;
padding: 12px;
}
/*
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; } */
@media all (min-width: 992px) {
.col-2 {width: 33.33%;}
}
@media all (min-width: 768px) and (max-width: 991px) {
#id-1 #id-2 .col-3 {width: 50%;}
#id-3 .col-6 {width: 100%;}
}
@media all (max-width: 767px) {
#id-1 #id-2 #id-3 {width: 100%;}
}
Thank you very much, sorry for so many words, again please let me know how to improve for future posts.
You have two issues in your media queries: is missing the word 'and' between the rules and the comma (,) between selectors #op-1.menu and $op-2.menu in the second media query.
Here is the media queries corrected
@media all and (min-width: 992px) {
.menu {width: 30%;}
}
@media all and (min-width: 768px) and (max-width: 991px) {
#op-1.menu, #op-2.menu {width: 47%;}
#op-3.menu {width: 100%;}
}
@media all and (max-width: 767px) {
.menu {width: 100%;}
}