Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sharina V. Jones
Sharina V. Jones
11,459 Points
Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

How do I remove a flex display?

I'm trying to create a two column layout when my site is above 480px and a four column layout when my site is above 660px.

The 480 break point works just fine. However, the 660 break point continues to display two columns. I tried setting the the display of the two middle sections to inline, but the two column display persists.

Plez halp!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sharina V. Jones | Tampa Tramps</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../css/mag-css.css">
    <link rel="stylesheet" href="../css/mag-responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="../index.html">
        <img src="../img/logo.png" alt="text Sharina V. Jones" class="logo">
      </a>
      <nav>
        <ul>
          <li><a href="#">Art</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">Food</a></li>
        </ul>
      </nav>
    </header>
    <div class="main-wrapper">
      <section class="section-one">
          <div class="sidebar col-one">
          <ul>
            <li>
              <img src="../img/da_vinci.jpg" alt="da vinci" class="thumb">
              <h4 class="ent">In Scene!</h4>
              <p>Bacon ipsum dolor amet ham hock ribeye turkey capicola boudin brisket alcatra landjaeger spare ribs flank.</p>
            </li>
            <li>
              <img src="../img/5music.jpg" alt="digital sound waves" class="thumb">
              <h4 class="art">To my ears...</h4>
              <p>Rump kevin pork belly turducken. Fatback shank sausage, spare ribs pork chop chuck filet mignon salami tenderloin pig t-bone biltong.</p>
            </li>
            <li>
              <img src="../img/candy-image.jpg" alt="candy" class="thumb">
              <h4 class="food">Food Junkie</h4>
              <p>T-bone in meatloaf proident, boudin short loin brisket voluptate fatback eiusmod.</p>
            </li>
            <li>
              <img src="../img/pap.jpg" alt="man taking a photo" class="thumb">
              <h4 class="ent">Celeb Watch</h4>
              <p>Ribeye pastrami shank tail ham hock frankfurter short loin jerky filet mignon bresaola. Short ribs ribeye prosciutto, jerky flank landjaeger sirloin corned beef.</p>
            </li>
            <li>
              <img src="../img/ground_level.jpg" alt="skateboard park" class="thumb">
              <h4 class="art">Ground Level</h4>
              <p>Pork loin porchetta cow beef pork belly pork. Doner t-bone ham chicken sausage pancetta drumstick jowl.</p>
            </li>
            <li>
              <img src="../img/skillet_small.jpg" "a cast iron skillet with food" class="thumb">
              <h4 class="food">Home Skillet</h4>
              <p>Doner ut reprehenderit, esse mollit tempor fatback labore ea chicken excepteur ham voluptate tenderloin leberkas.</p>
            </li>
          </ul>
        </div>
        <div class="col-two">
          <ul class="art-col">
            <li><h1 class="section-label">Arts!</h1></li>
            <li>
              <img src="../img/marquee.jpg" alt="Tampa Theater marquee" class="marquee">
              <p class="caption">The convenience of a movie theater with the history of an opera house.</p>
            </li>
            <li>
              <img src="../img/StrazCenter.jpg" alt="Tampa Straz Center" id="straz">
              <p class="caption">Sometimes it's broadway and sometimes it's <em>way</em> off broadway. Whatever the case, it's always entertaining.</p>
              </li>
            <li>
                <img src="../img/photographic.jpg" alt="Picture of the Florida Museum of Photography" id="photo">
              <p class="caption">Where Instagram is put to shame.</p>
            </li>
          </ul>
        </div>
     </section>
      <section class="section-two">
        <div class="col-three">
          <ul class="music-col">
            <li><h1>Florida Night Heat</h1></li>
            <li>
              <iframe width="560" height="315" id="yt" src="https://www.youtube.com/embed/IksgUQ-CTvA" frameborder="0" allowfullscreen></iframe>
            </li>
            <li>
              <img src="../img/FNH.jpg" alt="Florida Night Heat" id="fnh">
              <div class="fnh-caption">
              <h4 class="fnh">Florida Night Heat</h4>
              <h5 class="fnh">Instrumental Band</h5>
              <p class="fnh">Funk? New age? Psychedelic? Awesome!</p>
              <a href="https://www.facebook.com/floridanightheat"><img src="../img/facebook.png" alt="facebook logo" class="social-icon"></a>
              <a href="https://twitter.com/floridaniteheat" target="_blank"><img src="../img/twitter.png" alt="twitter logo" class="social-icon"></a>
                </div>
              </li>
            <li><h1 class="section-label">Music!</h1></li>
            <li><img src="../img/Andre_Jones_FNH.jpg" alt="Florida Night Heat bassist Andre Jones" id="dre">
              </li>
            </ul>
          </div>

        <div class="col-four">
        <ul class="food-col">
          <li><img src="../img/cafe-hey.jpg" alt="Window of Cafe Hey" id="hey"></li>
          <li><iframe src="https://www.google.com/maps/embed?pb=!1m27!1m12!1m3!1d3524.169775459966!2d-82.46172317891468!3d27.95808633049139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m12!1i0!3e6!4m3!3m2!1d28.003950999999997!2d-82.456064!4m5!1s0x88c2c463eb3e3b41%3A0x9589c4777076dd92!2sCafe+Hey+1540+North+Franklin+Street!3m2!1d27.957341!2d-82.460535!5e0!3m2!1sen!2sus!4v1429254495371" width="600" height="450" id="gm" frameborder="0" style="border:0"></iframe></li>
          <li><h4>Cafe Hey</h4>
          <p>1540 North Franklin Street, Tampa, FL 33602</p></li>
          <li><h1 class="section-label">Food!</h1></li>
        </ul>
          </div>
      </section>
    </div>
    <footer>
      <p>&copy; 2015 Sharina V. Jones</p>
    </footer>
   </body>
 </html>

/******************
GENERAL
******************/
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

.main-wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

img, iframe {
  max-width: 100%;
}

body p {
  font-size: .80em;
  line-height: 1.5em;
}

.logo {
  margin-bottom: 0;
}
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {  
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

nav a, a:visited {
  text-decoration: none;
  color: inherit;
}

nav a:hover {
  text-decoration: underline;
  color: #3FA9F5;
}

/******************
SIDEBAR
******************/
/*sidebar headers*/
div.sidebar h4 {
  padding-top: 0;
  padding-left: 2.5%;
  display: inline;
}

/*
h4.ent {
  color: #AE22D1;
}

h4.art {
  color: #0A74B5;
}

h4.food {
  color: #D1241F;
}
*/

h4 {
  font-weight: normal;
}

/*Section Labels*/
.section-label {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 5px 0 5px 0;
}

.thumb {
  max-width: 32px;
  max-height: 32px;
  display: inline;
  vertical-align: middle;
}

/******************
Arts Columns
******************/
.arts-col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arts-col li {
  width: 100%;
  margin: 2.5%;
}

.arts-col li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/******************
Music Column
******************/
.music-col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.music-col li {
  width: 100%;
  margin: 2.5%;
}

.music-col li a p {
  margin: 0;
  padding: 2.5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/******************
Food Column
******************/
.food-col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.food-col li {
  width: 100%;
  margin: 2.5%;
}

.food-col li a p {
  margin: 0;
  padding: 2.5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



.fnh-caption, .caption {
  background: #EBF3FA;
}

@media screen and (min-width: 480px) {
  .section-one {
    display: flex;
  }
  .col-two {
    padding-left: 2.5%;
  }
  .section-two {
    display: flex;
  }
  .col-four {
    padding-left: 2.5%;
  }
  }
}

@media screen and (min-width: 660px) {
  .section-one {
    display: inline-flex;
  }
  .section-two {
    display: inline-flex;
  }
  .main-wrapper {
    display: flex;
  }

}

1 Answer

Melissa Wheeler
Melissa Wheeler
6,306 Points

You have an extra closing bracket at the end of you 480px break and before your 660px break in your responsive CSS. It's high lighted orange and shouldn't be there. It's the only thing I see wrong at first glance. See if that works if not I can take another look at it for you.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

OMG!! That was it! We need a hug button. I've been banging my head against the wall for since last night. Thank you so much!

Melissa Wheeler
Melissa Wheeler
6,306 Points

Glad that did it for you. I've had similar happen to me, thankfully my husband codes too and we can check each others work