Media Queries - Challenge task 2 of 3

Question

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.
Help! Can't seem to figure this one out. Here's what I wrote: 
/* 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%;
    }
}

Vinh Thanh Vu · Accepted Answer

Thank you very much!! :))
You were right -- it was the code above -- missing a curly brace at the end. My focus on was the current challenge, largely because of the message I got back after submitting the code, "Bummer! Did you float '.logo' left?."

Maximiliane Quel · Answer

the code you provide looks fine to me. I tested it as well and it worked.
```css
@media (min-width: 769px) { 
  .logo {
        float: left; } 
    .main-nav { 
        float: right; } 
    .main { 
        width: 40.425531914894%; } 
    .extra { 
        display: block; 
        width: 23.404255319149%; } 
}
```
is that exactly how you put it in? did you check the code above as well? sometimes the issue is somewhere else.

Welcome to the Treehouse Community

Looking to learn something new?

Vinh Thanh Vu

Vinh Thanh Vu

Media Queries - Challenge task 2 of 3

2 Answers

Vinh Thanh Vu

Vinh Thanh Vu

Maximiliane Quel

Maximiliane Quel

Maximiliane Quel

Maximiliane Quel