(SOLVED) How come About section is not a single column layout when adjusting the browser width to be smaller/narrow?

Question

I found an extra curly brace that closed the media query where it should not have been. PHEW.

I have re-watched several videos to make sure I have typed out each code correctly. My codes have been working up to this point (Adjust the Profile Page and Header). After my last CSS styling under Media Queries (I adjusted the float and margin for my profile photo), the About page does not turn into a single column when I drag the browser width to make it smaller/narrow. The profile picture is floated to the left and the text has wrapped towards the bottom. In the video it shows a 2 column layout when the browser width is stretched out, and it turns into a single column when the browser is narrowed like a mobile version view. I have no idea what step I missed, I have backtracked several times. What is it that I am missing? Please help. :(

Answer 1 · 2015-05-16T04:29:26Z

May 16, 2015 4:29am

Thanks Ion Jones, here are the rest of my codes. about.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reena Dee | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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>Reena Dee</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> <img src="img/cheetos.jpg" alt="Photograph of Pusheen" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Reena. This is my design portfolio where I share some of my work. When I'm not designing, I like to hike with my dog and go to the beach.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/papermochi">@papermochi</a>.</p> </section> <footer> <a href="http://twitter.com/papermochi"> <img src="img/twitter-wrap.png" alt="Twitter logo" class= "social-icon"></a> <a href="http://facebook.com/makawowie"> <img src="img/facebook-wrap.png" alt="Facebook logo" class= "social-icon"></a> <p>© 2015 Reena Dee.</p> </footer> </div> </body> </html>

Answer 2 · 2015-05-16T04:30:08Z

May 16, 2015 4:30am

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reena Dee | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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>Reena Dee</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/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style of glow.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/papermochi"> <img src="img/twitter-wrap.png" alt="Twitter logo" class= "social-icon"></a> <a href="http://facebook.com/makawowie"> <img src="img/facebook-wrap.png" alt="Facebook logo" class= "social-icon"></a> <p>© 2015 Reena Dee.</p> </footer> </div> </body> </html>

Answer 3 · 2015-05-16T04:30:49Z

May 16, 2015 4:30am

contact.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reena Dee | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://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>Reena Dee</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available for speaking gigs or similar engagements. If you have any questions, please contact me.</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best ways to reach me.</p> </section> <section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:makawowie@gmail.com">makawowie@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=papermochi">@papermochi</a></li> </ul> </section> <footer> <a href="http://twitter.com/papermochi"> <img src="img/twitter-wrap.png" alt="Twitter logo" class= "social-icon"></a> <a href="http://facebook.com/makawowie"> <img src="img/facebook-wrap.png" alt="Facebook logo" class= "social-icon"></a> <p>© 2015 Reena Dee.</p> </footer> </div> </body> </html>

Answer 4 · 2015-05-16T04:32:25Z

May 16, 2015 4:32am

main.css

/*********
General 
**********/


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

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

a {
  text-decoration: none;
}


img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/*********
Heading
**********/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 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.8ems;
}

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

/*********
navigation 
**********/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

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

/*********
footer 
**********/


footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}


.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


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



#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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


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

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/*********
Page: Contact
**********/

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

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


/*********
colors 
**********/

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

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

/* nav background on mobile */
nav {
background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}```

Answer 5 · 2015-05-16T04:33:29Z

May 16, 2015 4:33am

responsive.css

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

   /*********
  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) {

}```

Answer 6 · 2015-05-17T02:47:11Z

May 17, 2015 2:47am

Is anyone else able to assist? I can't move forward with the video because of this particular issue, it is very frustrating. :( cc: Nick Pettit

Answer 7 · 2015-05-18T18:57:01Z

May 18, 2015 6:57pm

In your main.css try using the following

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%
}

you actually have a clear line about the display:block; line for some reason and I'm not sure why. Let me know if that works.

Answer 8 · 2016-02-11T18:56:24Z

February 11, 2016 6:56pm

I had the same issue as mentioned above. Even with the solve, my browser will not scale down past a certain point (which didn't occur until after I entered the media query in my responsive.css). When I open the file in Firefox it scales down smaller but has the photo on the left and the paragraph on the right but very narrow. I cannot get the picture to transition above the paragragh when the browser is scaled down to mobile size.

Welcome to the Treehouse Community

Looking to learn something new?

reenadee

reenadee

(SOLVED) How come About section is not a single column layout when adjusting the browser width to be smaller/narrow?

Ion Jones

Ion Jones

8 Answers

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

reenadee

Jared Hensley

Jared Hensley

Ross Watkins

Ross Watkins