Why does my wrapped grid component in a responsive page not associate to the correct class as defined in a @media style using CS

[github repository]()
[github page](/)

I'm taking an introductory class and have an assignment that was given, where I'm not to use any frameworks, like Bootstrap, but to build an responsive page with 3 boxes that have text and another box containing a "title" in the upper right corner. These boxes should have some equal margin around them and with the edge of the view.

The page is designed to have 3 sizes (desktop, Tablet, Mobile) that correspond to minmax-width in an @media element.

Desktop (col-lg-4) should have a single row (div class="row") where embedded are another div with the @media results to set how many components, followed by another div with a class defined to set the width to 90% of the grid component (for spacing) and add some other styles and some margin on the bottom.
Tablet (col-md-6 and col-md-12) In this size, the expected result is that the first 2 components should be on the top line taking up 50% (with their embedded div for size setting a similar 90% width for spacing), and the 3 component which would wrap, should be 100% of the page (col-md-12) with its embedded div for size putting it at 95% as this seems to equate to the 90% on the upper line for some reason.
Mobile (col-sm-12) This should be the smallest size and all 3 of the components should be wrapped into 3 lines each at 100% of the page, with their embedded div setting a width of 95%.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--   Meta tag is telling the browser to set the width to the Viewpoint width and scale it
       to 1    -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coursera Module 2 Solution</title>
<link rel="stylesheet" href="css/styles.css">  <!--link the sytles.css sheet-->
<!--
    github repository: 
    github page: /
-->
</head>

<body>
<h1>Our Menu</h1>

<div class="row">                           <!--sets row with width of 100%-->
  <div class="col-lg-4 col-md-6 col-sm-12"> <!--when tablet size should be .col-md-6-->
    <div class="secText">
      <div class="secTitle1">                <!--Sets title box styles ** works fine ** -->
        Chicken
      </div>    
      <p>
          Dummy Text Here for Chicken.
      </p>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12"> <!--when tablet size should be .col-md-6-->
    <div class="secText">
      <div class="secTitle2">               <!--Sets title box styles ** works fine ** -->
        Beef
      </div>
      <p>
      Dummy Text Here for Beef.
      </p>
    </div>
  </div>
  <div class="col-lg-4 col-sm-12 col-md-12 "> <!--when table size should be .col-md-12-->
    <div class="secText">
        <div class="secTitle3">
          Sushi
        </div>
        <p>
            Dummy Text Here for Sushi. 
        </p>
    </div>
  </div>
</div>

</body>
</html>

CSS

/*
Objective is to use just CSS to create a responsive page that will have 3 sizes. In each
of these sizes there will be 3 boxes (set at 90% to create some margin) which have some 
text and another title box in the upper right corner of the text box, along with 
consistent spacing between the 3 boxes:
    - Desktop ( >= 922 px)
        Grid with 3 equal size that are in a single horizontal line. Should pick up
        .col-lg-4 class defined below.
    - Table (>=768px to < 922 px)
        This will have a wrap effect, where the top row (1st 2 grids) should be 50% of the
        webpage (.col-md-6) and the wrapped 3d row should be 100% of the page but still providing
        the same margin (believe this is really 95% margin to keep boxes aligned
    - Mobile (<768px)
        All 3 boxes should be at 100% of the page (.col-sm-12) with a similar margin (95%) and
        these all wrap.

*/

/********** Base styles **********/
* {
  /*clear browser default margins and set border-box*/
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  /* Set H1 - no issues with this component*/
  margin-bottom: 36px;
  font-family: Helvetica, sans-serif;
  font-size: 1.75em;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.secText{
  /*define the div that will contain the p and the div with class .secTitle1, 2, 3*/
  border: 3px solid black;
  height: 150px;
  background-color: #A52A2A;
} 


div .secTitle1 {
  /*define the title box for 1st grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;          
  background-color: pink;
  color: black;
  text-align: center;
  font-size: 1.25em; 
  font-weight: bold;  
}

div .secTitle2 {
  /*define the title box for 2nd grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;                
  background-color: aquamarine;
  color: black;
  text-align: center;   
  font-size: 1.25em; 
  font-weight: bold; 
}

div .secTitle3 {
  /*define the title box for 3rd grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;             
  background-color: yellow;
  color: black;
  text-align: center; 
  font-size: 1.25em; 
  font-weight: bold;   
}


p {
  /*define p element - no issues with this element*/
  width: 100%;
  padding: 20px 5px 5px;
  font-family: Helvetica;
  color: white;
}

/* Simple Responsive Framework. */
.row {
  width: 100%;
}

/********** Desktop **********/
@media (min-width: 922px) {
  .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;
    /*border: 2px solid black; */
  }
  .col-lg-1 {
    width: 8.33%;      
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {       /*should be selected based on viewport when >=922 px*/
    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%;
  }

}

div.col-lg-4 > div.secText {
  /*This is meant to be picked up the .secText div when at desktop size*/
width: 90%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;
}

/********** Tablet **********/
@media (min-width: 768px) and (max-width: 921px) {
  .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;
    /* border: 2px solid green; */
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {         /*should be picked up based on logic above for 1st 2 grid boxes*/
    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 {      /*should be picked up on logic above for the 3rd wrapped grid component*/
    width: 100%;
  }
}

div.col-md-6 > div.secText {
  /*Meant to mimic the spacing when in Tablet size for 1st 2 grid components*/
  width: 90%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;
}

div.col-md-12 > div.secText {
  /*Meant to be picked up in Tablet size for the 3rd, wrapped grid component and set
    different margin width so that it aligns with the unwrapped grid components*/
  width: 95%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;

}

/********** Mobile **********/
@media (max-width: 767px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12v 
   {
    float: left;
    /* border: 2px solid green; */
    /*margin-bottom: 16px;*/
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {      /*should be picked up when Mobile size*/
    width: 100%;
  }

}
    
.col-sm-12 > .secText {
  /* This item gets pick up even if the brower is in any size, not sure how.
     Meant to apply to all grid components when in Mobile mode and apply margin similar to
     what was in place for the Desktop and tablet sizes top line*/
  width: 95%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;
}

My issue is that while I can get the format generally (3 across in desktop, 2+1 in tablet and 3 vertically in Mobile), the spacing isn't coming out correctly and when I inspect the code, I see that the Mobile size (col-sm-12) seems to exist and therefore have its styles applied even when the @media logic does not show it:

Shows Media resulting in col-lg-4

For embedded div to the col-lg-4 div, you can see it picked col-md-6 as valid

In the code I have done, while like in the example showed with these images, since the col-lg-4 and col-md-6 have the same styles, it still works. but when I go into tablet size, you can see that the last element is not picking up the same spacing as the first 2, even though all 3 should be in the col-sm-12.

shows the col-md-6 being picked up when size is small so the margins are not aligned.

It is not clear to me why or how the different media classes are getting picked up and applied when the sizes are not aligned.

I have tried several different approaches to fixing this:

I tried different ways to combine the col-xx-## class from the @media element to get to discreet pairing (.col-lg-4 > .secText) where this should provide the unique pairing so that I can apply the correct width:%; to create consistent spacing.
I have tried to eliminate the extra div tags
I have tried to have the .secText instead be an ID (#secText) and combine it with the .col-xx-## class
I have tried commenting out the combinations elements to see if they are tripping over to just what is there vs what should be available from the @media query.

[github repository](https://github/PEG11690/coursera-mod2-solution/tree/main)
[github page](https://peg11690.github.io/coursera-mod2-solution/)

The page is designed to have 3 sizes (desktop, Tablet, Mobile) that correspond to minmax-width in an @media element.

Desktop (col-lg-4) should have a single row (div class="row") where embedded are another div with the @media results to set how many components, followed by another div with a class defined to set the width to 90% of the grid component (for spacing) and add some other styles and some margin on the bottom.
Tablet (col-md-6 and col-md-12) In this size, the expected result is that the first 2 components should be on the top line taking up 50% (with their embedded div for size setting a similar 90% width for spacing), and the 3 component which would wrap, should be 100% of the page (col-md-12) with its embedded div for size putting it at 95% as this seems to equate to the 90% on the upper line for some reason.
Mobile (col-sm-12) This should be the smallest size and all 3 of the components should be wrapped into 3 lines each at 100% of the page, with their embedded div setting a width of 95%.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--   Meta tag is telling the browser to set the width to the Viewpoint width and scale it
       to 1    -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coursera Module 2 Solution</title>
<link rel="stylesheet" href="css/styles.css">  <!--link the sytles.css sheet-->
<!--
    github repository: https://github/PEG11690/coursera-mod2-solution/tree/main
    github page: https://peg11690.github.io/coursera-mod2-solution/
-->
</head>

<body>
<h1>Our Menu</h1>

<div class="row">                           <!--sets row with width of 100%-->
  <div class="col-lg-4 col-md-6 col-sm-12"> <!--when tablet size should be .col-md-6-->
    <div class="secText">
      <div class="secTitle1">                <!--Sets title box styles ** works fine ** -->
        Chicken
      </div>    
      <p>
          Dummy Text Here for Chicken.
      </p>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12"> <!--when tablet size should be .col-md-6-->
    <div class="secText">
      <div class="secTitle2">               <!--Sets title box styles ** works fine ** -->
        Beef
      </div>
      <p>
      Dummy Text Here for Beef.
      </p>
    </div>
  </div>
  <div class="col-lg-4 col-sm-12 col-md-12 "> <!--when table size should be .col-md-12-->
    <div class="secText">
        <div class="secTitle3">
          Sushi
        </div>
        <p>
            Dummy Text Here for Sushi. 
        </p>
    </div>
  </div>
</div>

</body>
</html>

CSS

/*
Objective is to use just CSS to create a responsive page that will have 3 sizes. In each
of these sizes there will be 3 boxes (set at 90% to create some margin) which have some 
text and another title box in the upper right corner of the text box, along with 
consistent spacing between the 3 boxes:
    - Desktop ( >= 922 px)
        Grid with 3 equal size that are in a single horizontal line. Should pick up
        .col-lg-4 class defined below.
    - Table (>=768px to < 922 px)
        This will have a wrap effect, where the top row (1st 2 grids) should be 50% of the
        webpage (.col-md-6) and the wrapped 3d row should be 100% of the page but still providing
        the same margin (believe this is really 95% margin to keep boxes aligned
    - Mobile (<768px)
        All 3 boxes should be at 100% of the page (.col-sm-12) with a similar margin (95%) and
        these all wrap.

*/

/********** Base styles **********/
* {
  /*clear browser default margins and set border-box*/
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  /* Set H1 - no issues with this component*/
  margin-bottom: 36px;
  font-family: Helvetica, sans-serif;
  font-size: 1.75em;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.secText{
  /*define the div that will contain the p and the div with class .secTitle1, 2, 3*/
  border: 3px solid black;
  height: 150px;
  background-color: #A52A2A;
} 


div .secTitle1 {
  /*define the title box for 1st grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;          
  background-color: pink;
  color: black;
  text-align: center;
  font-size: 1.25em; 
  font-weight: bold;  
}

div .secTitle2 {
  /*define the title box for 2nd grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;                
  background-color: aquamarine;
  color: black;
  text-align: center;   
  font-size: 1.25em; 
  font-weight: bold; 
}

div .secTitle3 {
  /*define the title box for 3rd grid item - no issues with this element*/
  border: 1px solid black; 
  width: 100px;
  height: 30px;
  float: right;             
  background-color: yellow;
  color: black;
  text-align: center; 
  font-size: 1.25em; 
  font-weight: bold;   
}


p {
  /*define p element - no issues with this element*/
  width: 100%;
  padding: 20px 5px 5px;
  font-family: Helvetica;
  color: white;
}

/* Simple Responsive Framework. */
.row {
  width: 100%;
}

/********** Desktop **********/
@media (min-width: 922px) {
  .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;
    /*border: 2px solid black; */
  }
  .col-lg-1 {
    width: 8.33%;      
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {       /*should be selected based on viewport when >=922 px*/
    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%;
  }

}

div.col-lg-4 > div.secText {
  /*This is meant to be picked up the .secText div when at desktop size*/
width: 90%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;
}

/********** Tablet **********/
@media (min-width: 768px) and (max-width: 921px) {
  .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;
    /* border: 2px solid green; */
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {         /*should be picked up based on logic above for 1st 2 grid boxes*/
    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 {      /*should be picked up on logic above for the 3rd wrapped grid component*/
    width: 100%;
  }
}

div.col-md-6 > div.secText {
  /*Meant to mimic the spacing when in Tablet size for 1st 2 grid components*/
  width: 90%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;
}

div.col-md-12 > div.secText {
  /*Meant to be picked up in Tablet size for the 3rd, wrapped grid component and set
    different margin width so that it aligns with the unwrapped grid components*/
  width: 95%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;

}

/********** Mobile **********/
@media (max-width: 767px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12v 
   {
    float: left;
    /* border: 2px solid green; */
    /*margin-bottom: 16px;*/
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {      /*should be picked up when Mobile size*/
    width: 100%;
  }

}
    
.col-sm-12 > .secText {
  /* This item gets pick up even if the brower is in any size, not sure how.
     Meant to apply to all grid components when in Mobile mode and apply margin similar to
     what was in place for the Desktop and tablet sizes top line*/
  width: 95%;
  margin-left: auto;
  margin-right:auto;
  margin-bottom: 16px;
}

Shows Media resulting in col-lg-4

For embedded div to the col-lg-4 div, you can see it picked col-md-6 as valid

shows the col-md-6 being picked up when size is small so the margins are not aligned.

It is not clear to me why or how the different media classes are getting picked up and applied when the sizes are not aligned.

I have tried several different approaches to fixing this:

I tried different ways to combine the col-xx-## class from the @media element to get to discreet pairing (.col-lg-4 > .secText) where this should provide the unique pairing so that I can apply the correct width:%; to create consistent spacing.
I have tried to eliminate the extra div tags
I have tried to have the .secText instead be an ID (#secText) and combine it with the .col-xx-## class
I have tried commenting out the combinations elements to see if they are tripping over to just what is there vs what should be available from the @media query.

Share Improve this question asked Jan 18 at 15:01 user29249189 111 bronze badge

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You need to put these two styles

  div.col-md-6 > div.secText {
    /*Meant to mimic the spacing when in Tablet size for 1st 2 grid components*/
    width: 90%;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 16px;
  }
  
  div.col-md-12 > div.secText {
    /*Meant to be picked up in Tablet size for the 3rd, wrapped grid component and set
      different margin width so that it aligns with the unwrapped grid components*/
    width: 95%;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 16px;
  
  }

INSIDE of the @media (min-width: 768px) and (max-width: 921px) { block.

The reason it was happening is because you had col-md-12 class on the third block, and since those styles were outside of the @media selector, they were being applied in all scenarios.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Why does my wrapped grid component in a responsive page not associate to the correct class as defined in a @media style using CS

1 Answer 1

与本文相关的文章

评论列表(0)