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

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

Christopher Beasley
Christopher Beasley
1,493 Points
Posted by Christopher Beasley
Christopher Beasley
1,493 Points

About page not having the correct heading and two columns.

My about page does not have the two columns and the headers are not lining up. Posting code for both responsive css and about page

Responsive:

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

/******************* Contact: Two Column Layout

********************/

#primary { width: 50%; float: left; }

#secondary{ width: 40%; float: right; }

}

/******************* Page: portfolio

********************/

gallery li{

width: 28.3333%;

}

gallery li:nth-child(4n) {

clear:left; }

/******************* Page: About

********************/

.profile-photo{ float: left; margin: 0 5% 80px 0; }

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

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

********************/

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

}

About html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">

</head>

<body> <header> <a href="index.html" id="logo"> <h1>Chris Beasley</h1> <h2>Programmer</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> <img src="img/chris.png" alt="Photo of Chris Beasley" class ="profile-photo" >

    <h3> About</h3 >
    <p> Hi, I am Chris Beasley and I would like to welcome you to my page. I am an aspring programmer who loves to develop. This page will show all my favorite works from web designs to app development. When I am not developing, I like to excerise, travel, and play chess.</p> 

 <p>   Please contact on my <a href="http://facebook.com/chris.beasley.14">facebook</a> and

<a href="http://twitter.com/smartguyhere">twitter </a>links if you would like me to develop anything for you. </p> </section>

  <footer>
   <a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>
   <a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"> </a>
  <p> &copy;  2016 Chris Beasley. </p>
  </footer>
 </div>

</body>

</html>

1 Answer

Joe Solomon
Joe Solomon
7,893 Points
Joe Solomon
Joe Solomon
7,893 Points

Hey Christopher, It looks like you're only adding the nav in your second @media screen at 660px. From the example which I had saved, the @media also included #logo, h1, h2 and the header as well. Here's what my code looks like.

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



}```
Christopher Beasley
Christopher Beasley
1,493 Points
Christopher Beasley
Christopher Beasley
1,493 Points

I finished the lesson and added that code but it did not fix my issue. Only my about page is having this issue. My contact and Portfolio pages are fine. I will also say that it is only happening in the mobile view. I am fine in desktop and tablet view.