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
Juliet DeAmicis
2,042 Pointsone last one--media query logo won't float left
Under "Tablets to Desktop," create a new media query that floats .logo left and .main-nav right if the viewport is 769px or wider. Then, add all other "Tablets to Desktop" rules inside the media query. Finally, create a new property inside the .extra rule that displays it as a block element.
@media screen and (min-width: 769px) {
.logo {
float: left;
.main-nav {
float: right;
.main {
width: 40.425531914894%;
.extra {
width: 23.404255319149%;
display:block;
}
4 Answers
Dennis Skoko
12,860 PointsRemember that the media query needs a start curly bracket and an ending curly bracket and everything in there will include the media query. when you choose an element to style, it also needs a start and an ending curly bracket to tell the code which styles goes to what. Like this: http://codepen.io/anon/pen/IjCbE
Travis Thompson
12,976 PointsI believe your syntax is incorrect. Your thinking seems solid though.
Try: @media screen and (min-width: 769px) { .logo { float: left; } .main-nav { float:right } .main { width: 40.425531914894%;} width: { 23.404255319149%; display:block; } }
Yoke Lee
2,871 Pointseverything starts with { must end with its pair } you can't have them share one } xD
Colin Craft
8,207 PointsI was having this same problem, but my syntax was correct under the /Tablets to Desktops/. Come to find out, my @media only screen and (min-width: 481px) was not curely-braced closed under the /Phones to Tablets/ section leading my mediaQuerie into another mediaQuerie Inception!!!!!