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
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsHow to make Contact Details section float to the right of the page?
I've looked at all the answers to similar problems like mine and can't figure it out. Here's the code from the contact.html page and responsive.css page:
<p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jonathan Johnson | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' 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>Jonathan Johnson</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'm available for speaking gigs and similar engagements. If you have any questions please don't hesitate to contact me.</p> <p> Please only use my phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p> </section> <section id="seconday"> <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:jjohnson@rootedschool.org">jjohnson@rootedschool.org</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name@teacherofwar">@teacherofwar</a></li> </ul> </section> <footer> <a href="http://twitter.com/teacherofwar"> <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/jonathan.m.johnson.54"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© Jonathan Johnson 2016</p> </footer> </div> </body> </html> </p>
responsive.css
<p>@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(3n +1) { clear: left; }
/********************
PAGE: PORTFOLIO ********************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
}</p>
6 Answers
Jennifer Nordell
Treehouse TeacherI believe your problem is a simple typo. Take a look at this line in your html.
<section id="seconday">
That should be "secondary". You're missing an "r". Try changing that and see if you see a difference!
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsIt's there, might be how I displayed it for the forum. Still not working. I think I'm having larger issues with the float property b/c I'm not seeing my profile photo float to the left in the next activity. Code from about.html below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jonathan Johnson | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jonathan Johnson</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/jonthanjohnson.jpg" alt="Photograph of Jonathan Johnson" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Jonathan Johnson!</p> <p>If you'd like to follow me on Twitter, my handle is <a href="http://twitter.com/teacherofwar">@teacherofwar</a></p> </section> <footer> <a href="http://twitter.com/teacherofwar"> <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/jonathan.m.johnson.54"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Jonathan Johnson.</p> </footer> </div> </body> </html>
Jonathan Johnson
Front End Web Development Techdegree Student 952 Pointscode from responsive.css
<p> @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(3n +1) { clear: left; }
/********************
PAGE: PORTFOLIO ********************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
} </p>
Jennifer Nordell
Treehouse TeacherYour responsive.css is not linked in your about.html.
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
No mention of responsive.css in your code :(
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsJennifer, you've been a saint all afternoon. Problem is I'm still not seeing it impact the floating. Any other suggestions? (let me know if I'm being too much of a pest)
Jennifer Nordell
Treehouse TeacherYou're absolutely not a pest! One other thing I noticed here (but I assumed was because of how your markdown looks in your post) is that I don't see an ending curly brace on the first media query. This is what I see in your post:
@media screen and (min-width: 480px) {
/******************** TWO COLUMN LAYOUT ********************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
<!-- There should be an ending curly brace here ! } -->
Check to make sure it's there.
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsYou helped fix my problem on the about page! I've been frustrated about this for 2 hours! Now I'm trying to figure out the contact page...figuring out my bracket failures there now (unless you catch something before me)...cannot thank you enough.
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsJust letting you know i figured it out Jennifer. I had these random <p></p> tags overriding the entire page (based on something I saw on another discussion) and it was screwing everything up. Learned more in these past 3-4 hours than my entire time watching these techdegree videos--in large part b/c of you. thank you so much
Jennifer Nordell
Treehouse TeacherI'm glad you got it figured out! And yes, things overwriting other things are both the beauty and the beast of CSS. I wish I could have helped more. Happy coding and hang in there! Every line of code you debug is a learning experience... trust me.
Jonathan Johnson
Front End Web Development Techdegree Student 952 PointsJonathan Johnson
Front End Web Development Techdegree Student 952 PointsThat's a great catch! Still not seeing any luck. Any other thoughts?
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherI don't know if it's how your markdown is presenting or not, but I also don't see a closing </div> tag to the "wrapper" div.