Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Manasa Reddy Banala
PLUS
Manasa Reddy Banala
Courses Plus Student 688 Points

adding media query and nav clears entire header when the size goes beyond 660px. So many questions about this issue but

adding media query and nav clears entire header when the size goes beyond 660px. So many questions about this issue but none answered this

@media screen and (min-width: 660px) { /************************* Header ***************************/ nav{ background:none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%;

}

17 Answers

alastair cooper
alastair cooper
28,204 Points

no-one is going to be able to answer it (or want to) whilst it is written like this.

Please click on the link Markdown Cheatsheet at the bottom of the page and it will explain how to write it so we can all read it. It's really easy.

We will also need to see your html or we can't work out your problem.

If you can sort that, I promise I will try to answer your question.

Manasa Reddy Banala
PLUS
Manasa Reddy Banala
Courses Plus Student 688 Points
@media screen and (min-width: 660px) { 
      /*************************
          Header
      **************************
   nav{
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;

    }

THis changes the entire header section

[alt text](C:/Users/rbanala.CAMPUS/Pictures/Capture.jpg "Screenshot")

alastair cooper
alastair cooper
28,204 Points

You have to leave a blank line before and after the 3 ticks at the top and the bottom or it won't work

alastair cooper
alastair cooper
28,204 Points

perfect. I'll give it a go for you. It looks like you are not closing the comment that says HEADER . Add a / after the last *

alastair cooper
alastair cooper
28,204 Points

and make sure the media query and the nav rule are both closed

Manasa Reddy Banala
Manasa Reddy Banala
Courses Plus Student 688 Points

I have closed all of them. Just couldn't copy the code

@media screen and (min-width: 660px) { 
      /*************************
          Header
      **************************/
   nav{
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;

    }
}
alastair cooper
alastair cooper
28,204 Points

OK, I don't think there is anything wrong with the media query, so to help, I'll have to see the html and rest of the css.

Unless what you mean by 'they clear' is that the background disappears. That is what background: none; does in the media query to anything in the nav tags.

if you copy and paste the files to me, I will try to fix it for you

Manasa Reddy Banala
PLUS
Manasa Reddy Banala
Courses Plus Student 688 Points

responisve.css:

/******************************
Media Queries - CSS Rule
*******************************/
/* */
@media screen and (min-width: 480px) { 

  /*************************
    TWO COLUMN LAYOUT
      ***************************/
  #primary{
    width:50%;
    float:left;
  }

  #secondary{
    width: 40%;
    float:right;
  }
  /*************************
    3x((?)+(2.5+2.5))=100%
      3x=85% => x=28.3333333%
      ***************************/

    /*************************
    PAGE: ABOUT PAGE
      ***************************/

  .profile-photo{
/*    display:inline-block;*/
    float:left;
    margin: 2% 5% 80px 0;

  }

  /*************************
    PAGE: PORTFOLIO PAGE
      ***************************/

  #gallery li{
    width:28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear:left;
  }



}
/* 
@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;
  }

}

index.html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"> <!-- Attribute -->
        <title>Ravikanth Reddy Banala | Designer </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css"> <!-- overrides normalize.css -->    
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <header> 
            <a href="index.html" id="logo">
                <h1>Ravikanth Reddy Banala</h1>
                <h2> Designer </h2>
            </a>
            <nav> 
                <ul> 
                    <li><a href="index.html" class="selected"> Portfolio </a> </li>
                    <li><a href="about.html">about</a> </li>
                    <li> <a href="contact.html">Contact </a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
          <section> 
             <ul id="gallery" >
                  <li>
                      <a href="img/twitter-wrap.png">
                          <img src="img/twitter.png" alt="">
                          <p> Experimentation with color </p>
                      </a>
                  </li>
                  <li>
                      <a href="img/numbers-01.jpg">
                          <img src="img/numbers-01.jpg" alt="">
                          <p> Expe color </p>
                      </a>
                  </li>
                  <li>
                      <a href="img/numbers-02.jpg">
                          <img src="img/numbers-02.jpg" alt="">
                          <p> Experimenta with color </p>
                      </a>
                  </li>
                  <li>
                      <a href="img/numbers-06.jpg">
                          <img src="img/numbers-06.jpg" alt="">
                          <p> Er </p>
                      </a>
                  </li>
              </ul>
          </section>
          <footer> 
              <a href="http://twitter.com/urslovingnani">
                  <img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon">
              </a>
              <img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon">
              <p>&copy; 2016 Ravikanth Reddy Banala </p>
          </footer>
        </div>
    </body>

</html>

about.html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"> <!-- Attribute -->
        <title>Ravikanth Reddy Banala | Designer </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css"> <!-- overrides normalize.css -->    
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <header> 
            <a href="index.html" id="logo">
                <h1>Ravikanth Reddy Banala</h1>
                <h2> Designer </h2>
            </a>
            <nav> 
                <ul> 
                    <li><a href="index.html" > Portfolio </a> </li>
                    <li><a href="about.html" class="selected">about</a> </li>
                    <li> <a href="contact.html">Contact </a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
          <section>  
            <!-- add profile pic -->
            <img src="img/nick.jpg" alt="photograph of nick" class="profile-photo"> <!-- 200x200px pic should works bettter -->
            <h3> About </h3>
            <p> Description is yhet to be provided </p>
            <p> If you like to follow me on twitter, my username is <a href="http://twitter.com/urslovingnani">@urslovingnani</a></p>
          </section>          

          <footer> 
              <a href="http://twitter.com/ursloving_nani">
                  <img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon">
              </a>
              <img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon">
              <p>&copy; 2016 Ravikanth Reddy Banala </p>
          </footer>
        </div>
    </body>

</html>

main.css:

<!--body {
  background-color: orange;
} -->

/******************************
GENERAL STYLING
*******************************/

body {
font-family:'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

/* allow the images to fill their parent element*/
img
{
  max-width:100%;  /** fluid image- % is relative element since it will change along with the parent element size or browser size whereas pixels are fixed */
}

h3 {
  margin:0 0 1em 0;
}di


/******************************
HEADER/ING STYLING
*******************************/

header {
  float:left; /* will effect in desktop layout*/
  margin:0 0 30px 0; /* TRBL clock wise - top margin removes */
  padding:5px 0 0 0;
  width:100%;

}


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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0; /* 15 LR, 0 UD*/
  font-size: 1.75em;  /*no LR, UD 1.75 new unit em*/
  font-weight:normal;
  line-height:0.8em;

}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0; <!--top, LR, bottom -->
  font-weight:normal;
}

/******************************
Navigation mob comp
*******************************/

nav {
  text-align:center;
  padding:10px 0; /* TB 0 LR px */
  margin:20px 0 0;
}


nav ul{
  list-style:none; /* remove bullet points */
  margin:0 10px; /* navigation - remove the margins on top and bottom and 10 on LR*/
  padding:0; /* remove padding  */

}

nav li{
  display:inline-block; /* in line with one another and in a row */
}

/*polish navigation and footer */

nav a{
  font-weight:800;
  padding:15px 10px; /* space nav */
}

/******************************
FOOTER - MOBILE COMP
*******************************/

footer {
  font-size:0.75em;
  text-align:center;
  clear: both; /*clear around so that footer shows below sepearately*/
  padding-top: 50px;
  color: #ccc;
}

/* polish footer */
.social-icon { /* or also footer a */
  width:20px;
  height:20px;
  margin:0 5px;
}

/******************************
PAGE : PORTFOLIO 
*******************************/

/* remove the margin, padding and bullet points*/
#gallery
{
  margin: 0;
  padding:0;
  list-style:none;/* (Remove bullet points */
}

/* float: position in a special way so image floats on the page to the let or right and the text then flows around the image*/

#gallery li
{
  float:left; 
  width: 45%; /* regardless of size it takes only 45% of width of page 2*45+10(space of 2.5xx2.5 around the image)*/
  margin: 2.5%;
  background-color:#f5f5f5;
  color: #bdc3c7;
}

#gallery li a p 
{
  margin:0;
  padding:5%;
  font-size:0.75em;
  color:#bdc3c7;
}

/******************************
PAGE: ABOUT
*******************************/

.profile-photo{
  display:block;
  max-width:150px; 
  margin:0 auto 30px; /* cneter the imag using margin and add 30px at the bottom */
  border-radius:100%; /* rounded corner to element - profile pic/dp*/
}


/******************************
PAGE : Contact
*******************************/

.contact-info{
  list-style:none;
  padding:0;
  margin:0;
  font-size:0.9em;
}

.contact-info a {
  display: block; /* each image/anchor elements takes up space so that images displayed correct*/
  min-height:20px; /* least 20px */
  background-repeat:no-repeat; /* BG images in CSS will always repeat by default but we want these BGs display only once */
  background-size:20px 20px; /* resize the BG, slightly larger than they need to be, infact double*/
  padding:0 0 0 30px; /*left padding btw img and text horizontal*/
  margin:0 0 10px; /*vertical separation*/
  /** Margin adds space on the "outside" of the element and pushes nearby elements away. Padding adds space on the "inside" of the element and makes space between element's edge and its content**/
}

.contact-info li.phone a {
  background-image:url('../img/phone.png'); /** .. will jump out from CSS and then go to img folder **/
  /** BG can set all values for a bg, inc colors and images but BG-image can only set image**/
}

.contact-info li.mail a {
  background-image:url('../img/mail.png'); /** .. will jump out from CSS and then go to img folder **/
}
.contact-info li.twitter a {
  background-image:url('../img/twitter.png'); /** .. will jump out from CSS and then go to img folder **/
}



/******************************
COLOR
*******************************/

/* site body */
body {
  background-color: #fff;  /* site body */
  color: #999;
}


/* Green header */
header{
  background: #6ab47b;
  border-color: #599a68;

}
/* nav background on mobile */
nav {
  background: #599a68;
}
/* logo text White header */
h1,h2 {
  color: #fff;
}
a{
  color: #6ab476; 
}
/* nav link */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f; 
}

Video I was refering to : (https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adjust-the-profile-page-and-header )

alastair cooper
alastair cooper
28,204 Points

At first glance everything looks ok except the additional opening comment just above the 660px breakpoint media query. This is blocking out the media query itself, but that shouldn't make it disappear, it would just nullify the breakpoint.

The other thing is that float right may take the header out of screen shot if the screen width values are out. Use the console tools to inspect the body element to check the width.

I will try loading this up in my browser and see if I can find the problem

alastair cooper
alastair cooper
28,204 Points

In responsive.css, the @media min-width 660 is commented out with an extra /* before it

To inspect the page, right-click on the element and select inspect element.

What browser are you using?

Manasa Reddy Banala
PLUS
Manasa Reddy Banala
Courses Plus Student 688 Points

https://teamtreehouse.com/community/media-query-660-loses-the-whole-header-and-navigation

Someone answered the same question but I am not sure what they actually talking about

And the comment lines are just mis typed since I was examining each and every line of the code. So that might be the reason for extra /*

I am using chrome browser

alastair cooper
alastair cooper
28,204 Points

You have removed the background in the nav rule by setting it to none, so any background-colors or background-images are gone. You have a white screen where your header is. Your text is also white so you cannot see it even though it is still there. The header is still there as well. If you open your console (F12 on windows) and select the elements tab, click on the header tag and it will show in your browser. To prove the text is still there, alter it's color.

I know you're right, but in the tutorial, we are going line for line with Nick, and getting a different result. In the video at 3:50 he shows the various changes made on the page and how they work - but it's just not working for us?

I'm sure it's something easy to fix, but I've literally copied his code from the resource material (DOWNLOADS) and pasted it in mine and it's not working like his in the video.

Manasa Reddy Banala
PLUS
Manasa Reddy Banala
Courses Plus Student 688 Points

But in the video the color doesn't change and instead the color changes to that of header background color. And when I width of page goes beyond 660px, header section is not coming as shown in the video.

the code explained in the video is incorrect? or the output shown is incorrect? I din't quite get that.

alastair cooper
alastair cooper
28,204 Points

both of the above are unlikely. It is more than likely a typo somewhere unless you have a very old version of chrome. I have to go to bed now, but I will have another go tomorrow.

I am having the same problem Ravikanth is having: the video shows the nav background changing to the lighter green and the image does NOT move up into the "NAV" bar:

nick gif

Where in my version, the darker nav bar goes away altogether, the picture and Body contents move up into the area where the NAV bar was, and the NAV elements are on the right in white ("About" shows as it is the "selected" page:

eric gif

I went line for line with Nick's code provided in the DOWNLOADS. I honestly can't figure it out.

(I've previewed this 5 times and can't figure out how to get these gifs to link).

Mobolaji Kamson
Mobolaji Kamson
1,421 Points

Did you ever figure this out ?

Mobolaji Kamson
Mobolaji Kamson
1,421 Points

I am having the same exact problem in what seems to be like 3 months later ......