help! added a media query and grid layout float left broke?

Question

I added a media query for min-width:320px and my grid layout in larger browser sizes broke. The layout for 320px is seen as default for larger browser size too. If i take away the min-width:320px media query the grid layout resumes to what I want to be seen in larger browser windows.

<html>
  <body>
    <head>
      <title>6 column grid responsive</title>
    </head>
    <div class="grid grid-pad">
    <header class="col-6 col-6-small">
      <h1>6 column grid responsive</h1>
      <span>Practicing and practicing</span>
    </header>
      <article class="col-4 col-6-small">
        <h3>title of article</h3>
        <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
      </article>
      <aside class="col-2 col-6-small">
        <h3>Aside section</h3>
         face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
      </aside>

      <section class="col-2 col-6-small">
        <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his</p>
    </section>
    <section class="col-2 col-6-small">
      <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his</p>
    </section>
        <section class="col-2 col-6-small">
      <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his</p>
    </section>

    <footer class="col-6 col-6-small">
      <p>copyrighted 1980s</p>
    </footer>
    </div> <!--end of grid container-->

  </body>
    </html>

/*==========Grid layout for 6 columns
 =======*/

*, *:before, *:after {
  box-sizing: border-box;
}

.grid {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto; /*centers the grid in browser window*/
}

.grid:after {
  content:"";
  clear: both;
  display: table;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding: 20px; /*setting gutter as padding instead of % margins */

}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.grid-pad {
  /*used for creating outside gutters*/
  padding: 20px 0 20 20px;  
}


.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px; 
}

[class*='col-'] {
  background-color: black;
  color: white;
}

.col-1 { 
width: 16.66%;
}
.col-2 {
  width: 33.33%;
}

.col-3 {
  width: 50%;
}

.col-4 {
  width: 66.664%;
}

.col-5 {
  width: 83.33%;
}

.col-6 {
  width: 100%;
}

/****==========MEDIA QUeries=======**/



@media screen and (min-width:320px){

  .col-1-small { 
width: 16.66%;
}
.col-2-small {
  width: 33.33%;
}

.col-3-small {
  width: 50%;
}

.col-4-small {
  width: 66.664%;
}

.col-5-small {
  width: 83.33%;
}

.col-6-small {
  width: 100%;
}

}

Answer 1 · 2015-08-25T03:43:36Z

August 25, 2015 3:43am

By setting the media query to check for min-width. you are stating that you want all the properties set within that media query to be applied to all devices LARGER than 320px. You would need to instead set the media query to max-width instead to apply said properties to all devices SMALLER than 320px.

In reality, you'll probably want to give it a higher max-width than 320px. I'd start at 360px.

I hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

sandygomez

sandygomez

help! added a media query and grid layout float left broke?

1 Answer

Chyno Deluxe

Chyno Deluxe