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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points
Posted by ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points

Problems with media query (min-width 660 px) - page doesn't work correct, navigation panel disappears when expanding

Problems with media query (min-width 660 px) - page doesn't work correct, navigation panel and header disappear when expanding the window, profile picture and about text float to left (green bottom border appears though). While working with previous query (min-width 480px) everything was exactly like in the Nick's video. Don't understand what's wrong

4 Answers

ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points
ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points

Sure. In my main.css I wrote two : in header, like that:

header {
  float: : left;
}

Always double check your syntax :)

Dustin Matlock
Dustin Matlock
33,856 Points

Thanks for sharing! By the way, here's how to post code. :smiley:

Posting Code to Treehouse

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Alina, make sure you've closed off your media query properly. If you think you've done that, we'll need some of your code to see what's going on.

For instance:

@media screen and (min-width: 660px) {

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

} /* Make sure you didn't leave this one out */
ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points
ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points

Yes, I checked the code several times, just can't find a mistake... Here's this part of CSS

@media screen and (min-width: 660px) {

  /************************
  Header
  *************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }
}
Dustin Matlock
Dustin Matlock
33,856 Points

This part of your code is okay. Make sure the other media query is closed off as well.

ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points
ALINA ZAMOGILNYKH
ALINA ZAMOGILNYKH
16,664 Points

CSS validator service which was studied in the next stage helped to find my mistake. Of course it was a stupid mistake - some extra element in the code (in the main.css actually). Thanks for your attention anyway :)

Dustin Matlock
Dustin Matlock
33,856 Points

No problem. If you care to share your mistake, it might help other students. Glad you figured it out. Most times it's something simple.