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

Posted by Chris Dziewa
Chris Dziewa
17,781 Points

Problem with media query "adaptive layouts with media query" project files

For some reason, this displays correctly in chrome, but when I expand the window with firefox, my red div (.extra) is stuck on the bottom line even though, mathematically speaking, all three divs should fit on the same line. Here are my media queries:

/* Phones to Tablets */

@media only screen and (min-width: 481px) {
    .col {
        float: left;
    }
    .main {
        width: 65.957446808511%;
    }
    .secondary {
        width: 31.914893617021%;
    }
    .secondary, .extra {
        margin-left: 2.127659574468%;
    }
}

/*Tablets to Desktop */

@media only screen and (min-width: 769px) {
    .logo {
        float: left;
    }
    .main-nav {
        float: right;
    }
    .main {
        width: 40.425531914894%;
    }
    .extra {
        display: block;
        width: 23.404255319149%;
    }

}

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Would adding a vendor prefix help?

Chris Dziewa
Chris Dziewa
17,781 Points

I'm not exactly sure that would help. I don't believe any of the code in my media query includes anything that would require vendor prefixes. In fact, even the final copy included in the project files showed up with the same problem. I am using Firefox 25 with the latest update.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Create a working demo using codepen so we can see the bigger picture.

Don't know how to use codepen? No problem here's a short intro

Michael Svien
PLUS
Michael Svien
Courses Plus Student 10,078 Points
Michael Svien
Michael Svien
Courses Plus Student 10,078 Points

I can confirm, this is still an issue. Simply opening index.html from the "Adaptive Layouts with Media Queries" section in Firefox is sufficient to display the error.