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 Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

What did I do wrong after @media selector in css??

I was trying to make the website be responsive, but am getting a weird design. The background color is less now, with the h1 , h2 and nav elements going out of the header.

Please help.

here is my workspace screen shot,

https://w.trhou.se/trc7w0olju

2 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

I figured out where the problem is in your code. You should add the following rule to header:

header{
   float:left;
   min-width:100%
}
Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

Wow awesome Thanks :)

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

You are welcome!

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Try to add space after min-width property:

@media screen and (min-width: 480px){ ... }
Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

Ya I tried that, nothing changed.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

It works fine by me. Try to refresh your page with Ctrl+F5 and clean cache for this page.

Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

I have the mobile version done properly, The problem is with the desktop version.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

I understood you, but it works fine by me, either desktop or mobile version.

Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

http://port-80-xn6vta0rna.treehouse-app.com

check out this link. This is the output I'm getting.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

This Workspace is unavailable right now.

But it works fine, when you add the following code to your main css:

header{
    float:left;
    margin: 0 0 30px;
    padding: 5px 0 0;
    width: 100%;
}

#logo{
    text-align: center;
    margin: 0
}

h1{
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em
}

h2{
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}

Also do not forget to wrap your h1 and h2 into menu tag.

You can also compare your code with mine - https://github.com/SergeyPodgornyy/Treehouse-How_to_make_a_website/tree/master/css