Reputation: 23

What is overriding my @media queries preventing the breakpoints from applying?

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)

Example Page To Create

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.

Upvotes: 2

Answers (5)

S.Serpooshan

Reputation: 7440

This is my another answer, adding a parent div for menu box items and use its padding instead of the margin for inner menu box. The main advantage of this method is that all sizes (33.33%, 50%, 100%) could be set to exact values we need (see @media widths) without using special estimated values or calc formulas or javascript ...

body {
    background: #fff;
    box-sizing: border-box;
    font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */
    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;
    box-sizing: border-box; /* apply it to main container */
}

.menu { /* menu external box */
  float: left;
  padding: 10px; /* instead of inner menu margin */
  width: 33.33%; /* just a default width for case we are at large screens */
  box-sizing: border-box; /* apply it to main container */
}

.menu > div { /* menu internal box (menu-child) */
    /*float:left;*/ /* EDIT! moved to parent div */
    width:100%; /* EDIT! fill whole of parent, the size is set by parent */
    /*margin: 10px;*/ /* EDIT! set by padding of parent div */
    background: grey;
    border: 1px solid #000; 
    font-size: .75em;
}


div.food-type {
    text-align: center;
    font-weight: bold;
    padding: 10px 5px; /* padding-left & right could be less as we center title text */
    width: 40%; /* or width: auto; min-width: 33%; to ensure large titles not overflow the width size */
    float: right;
    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 and (min-width: 992px) { /* width > 992px */
  .menu { width:33.33%; padding:10px; float:left;}
}

@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px  */
  #op-1.menu {width: 50%;}
  #op-2.menu {width: 50%;}
  #op-3.menu {width: 100%;}
}

@media all and (max-width: 767px) { /* width < 768px  */
  .menu {width: 100%;}
}

<h1>Our Menu</h1>

  <div id="container">
    <!-- Chicken Container -->

    <div id="op-1" class="menu">
      <div> <!-- class="menu-child" -->
        <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>
    </div>

    <!-- Beef Container -->
    <div id="op-2" class="menu">
      <div> <!-- class="menu-child" -->
        <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>
    </div>


    <!-- Sushi Container -->
    <div id="op-3" class="menu">
      <div> <!-- class="menu-child" -->
        <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>
  </div>

Upvotes: 0

S.Serpooshan

Reputation: 7440

you have define @media queries like as this:

@media all and (min-width: 992px) { ... }

the 'and' keyword is missing after @media all

There are some points there, for example to find actual width based on 10px margin in left/right side of each menu box. e.g when all 3 box shall be visible in large screen sizes, we can set width as:

width: calc( (100% - 60px) / 3 ); /* 60px is 3*20, ( 20px = 10+10 Left+Right Margins) */

I modified your code as the following:

* {
    box-sizing: border-box;
}


body {
    background: #fff;
    box-sizing: border-box;
    font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */
    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;

    /*box-sizing: border-box;*/
}

/*
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: 40%; /* *** */
    /*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 and (min-width: 992px) { /* width > 992px */
      .menu {width: calc( (100% - 60px) / 3 ); } /* 31% */
}

@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px  */
    #op-1.menu {width: calc( (100% - 40px) / 2 );} /* 47% */
    #op-2.menu {width: calc( (100% - 40px) / 2 );}
    #op-3.menu {width: calc(100% - 20px);}
}

@media all and (max-width: 767px) { /* width < 768px  */
      .menu {width: calc(100% - 20px);}
}

  <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>

Upvotes: 0

Kevin Jimenez

Reputation: 436

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%;}
}

Upvotes: 1

C3roe

Reputation: 96281

Not a single one of your media queries is syntactically correct.

@media all (min-width: 992px) {

It needs to be

@media all and (min-width: 992px) {

Upvotes: 0

Dinca Adrian

Reputation: 1230

If you use media queries with min-width the order is from small to higher width in css, otherwise if counting on max-width you have to go from large to small screens.

Solution: Whenever you use media queries, take a good care of the order in css so it cascades and not overwrite yourself. Switch the order of media queries so it goes from small to large screens when you use min-width as parameter.

Upvotes: 0

What is overriding my @media queries preventing the breakpoints from applying?

Answers (5)

Related Questions