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

Firefox Flexbox not working

I just tested my site in Firefox and the layout is hilariously bad. I checked Mozilla's documentation, and I'm fairly sure that I'm using the correct prefixes and supported features. I have no idea what I'm doing wrong here.

<!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">
    <script type="text/javascript" src="../js/modernizr.js"></script>
    <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=!1m18!1m12!1m3!1d3524.194107880321!2d-82.46053500000001!3d27.95734100000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c2c463eb3e3b41%3A0x9589c4777076dd92!2sCafe+Hey!5e0!3m2!1sen!2sus!4v1429381299312" width="600" height="450" 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: 960px;
  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;
}

nav li:nth-child(2n) {
  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: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 2%;
  }
  .col-two {
    padding-left: 2.5%;
  }
  .section-two {    
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-four {
    padding-left: 2.5%;
  }

}


@media screen and (min-width: 760px) {
  .section-one {
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: -ms-inline-flex;
    display: inline-flex;
  }
  .section-two {
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: -ms-inline-flex;
    display: inline-flex;
  }
  .main-wrapper {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }

}
/*@media screen and (min-width: 660px) {
  /*body.main-wrapper {
    margin-left: 0 auto;
    padding: none;
    }
  .col-one {
    float: left;
    max-width: 20%;
    margin-left: .5%;
  }
  .col-two {
    float: left;
    max-width: 26.666%;
    margin-left: .5%;
  }
  .col-three {
    float: left;
    max-width: 26.666%;
    margin-left: .5%;
  }

  .col-four {
    float: right;
    max-width: 26.666%;
  }

  footer {
    clear: both;
  }
  */
}
*/

Please help.

Ryan Smee
Ryan Smee
3,392 Points
Ryan Smee
Ryan Smee
3,392 Points

If ever something works in one browser but not others, it's always a good idea to go to www.caniuse.com and check to see if it is supported in the version of your browser and if you need to pre-fix it. This is especially true with new Methods like flexbox.

I hope this helps:)

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

I checked caniuse, and I thought I was good to go. I also used BrowserStack, and it didn't look good through it either.

Ryan Smee
Ryan Smee
3,392 Points
Ryan Smee
Ryan Smee
3,392 Points

fallencloud - Yeah I use browser stack as well and I found the same when doing some Flexbox testing. I don't find it is widely enough supported to put in a lot of sites, although it is super cool to know for when it is more widely supported. (Other people may disagree with me here but I've found with my client work they want the best support all the time.

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Firefox Version 2 to 21 does not support flex-wrap or flex-flow and requires -moz- prefix for all other flex elements. Firefox Version 22 to 27 does nto support flex-wrap or flex-flow but does not require prefix. Firefox Version 28 to 40 every flex element is supported without prefix.

I am on version 37 currently on Ubuntu and have no problems with how your code displays.

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

I'm not sure what the deal was. Firefox just updated itself on my computer but I'm pretty sure the version I had was over 28. I ended up redoing my layout with floats. Thanks for the response though.

Jacob Christiansen
Jacob Christiansen
3,193 Points
Jacob Christiansen
Jacob Christiansen
3,193 Points

try setting

* {
min-height: 0;
min-width: 0;
}
Patrick McKinney
Patrick McKinney
13,151 Points

I was having this problem. I left a min-height for the flex-child container, but added min-width: 0 to the element, and it resolved the Firefox issue.

Thanks for the tip!