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

Posted by srikanthpunuru
srikanthpunuru
4,182 Points

My About page is not responsive , please help me

Here is my CSS code: I think I have followed tutorial as it is. picture stays in the middle. It is not moving left as we see in tutorial. 

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

 /* ****************************
  TWO COLUMN LAYOUT
***********************************/

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

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

 /* ********************************
 PAGE: PORTFOLI
***********************************/

 #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: 52.5%%;

  }

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

  h1 {
    font-size: 2.5em; 
  }

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

  header {
   border-bottom: 5px solid #599a69;
    margin-bottom: 60px;    
  } 

}

6 Answers

richardwheeler
richardwheeler
8,332 Points

Your very first line should be min-width not max width

@media screen and (min-width: 480px) {
richardwheeler
richardwheeler
8,332 Points

Here's my completed CSS

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


/***********************************
TWO COLUMN LAYOUT
***********************************/

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

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



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

  #gallery li {
   width: 28.33333%; 
  }

  #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%;
  }

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


}
srikanthpunuru
srikanthpunuru
4,182 Points

Yes, I tried with your suggestion. Nothing is changed. Except About page everything is responsive. Do I need to share my html file?

katiaalamir
katiaalamir
7,091 Points
katiaalamir
katiaalamir
7,091 Points

The problem could have been that you missed something in your HTML then. Sometimes I validate my code to debug potential syntax errors: https://validator.w3.org/#validate_by_input

Hope this helps! Otherwise share the HTML with us!

richardwheeler
richardwheeler
8,332 Points
richardwheeler
richardwheeler
8,332 Points

That's a good tool, thank you Katia! Good suggestion. I would be happy to check your HTML though if you would like srikanthpunuru.

srikanthpunuru
srikanthpunuru
4,182 Points
srikanthpunuru
srikanthpunuru
4,182 Points

I feel problem might be with Launch Editor / treehouse editor. I have processed my code in codepen. It works fine.

richardwheeler
richardwheeler
8,332 Points
richardwheeler
richardwheeler
8,332 Points

Yes and no. I've seen issues come up depending on the browser you use and network settings as well. But as long as you know ya got it right. Hope you have a good day! Feel free to ask me for assistance in the future too!

kate tychanska
kate tychanska
5,694 Points
kate tychanska
kate tychanska
5,694 Points

Hi, I had the same problem but i checked the responsive.css file implementation i html code. I found few small syntax errors. Now it works.

srikanthpunuru
srikanthpunuru
4,182 Points

I had a problem with only about page. everything worked fine. But I run the problem outside treehouse workspace, about me was responsive.