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
Ayaz Sadiq
Courses Plus Student 5,361 PointsHow come my name and the title of my occupation aren't aligned?
The h1 and h2 in on my about page aren't aligned. They are to the left, but the title of my job is not aligned beneath my name. I'll see if I can display my code.
Ayaz Sadiq
Courses Plus Student 5,361 Points@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) {
/************************************************* PAGE: 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; }
}
Ayaz Sadiq
Courses Plus Student 5,361 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ayaz Sadiq | Concierge</title> <link rel="stylesheet" href="css/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"> <meta name="viewport" content="width-device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ayaz Sadiq</h1> <h2>Concierge</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Ayaz Sadiq! This is my design portfolio where I share all of my favorite work. I'm NOT the person in this picture. He is a man named Nick Pettit. I don't have a profile picture. As soon as I know how to make one, then I'll upload one on my page. I'm learning how to design a webpage plus I want to learn how to program in code. I'm learning how to code as a hobby before I turn it into an occupation.</p> <p>If you would like to follow me on Twitter, my username is <a href="http://twitter.com/Ayaz627">@Ayaz627</a>.</p> </section> <footer> <a href="http://twitter.com/Ayaz627"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/ayaz.sadiq.3"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Ayaz Sadiq.</p> </footer> </div> </body> </html>
2 Answers
Frederico Graciano
Courses Plus Student 2,768 PointsPlease post your code following the guide below the Post Answer Button. it Says: Reference this Markdown Cheatsheet for syntax examples for formatting your post. click on Markdown Cheatsheet.
So I can better help you. thank you.
Ayaz Sadiq
Courses Plus Student 5,361 PointsFrederico-I can't put my code in the markdown cheatsheet. When I click on markdown cheatsheet, a window pops up with rules and guidelines.
Ayaz Sadiq
Courses Plus Student 5,361 PointsAyaz Sadiq
Courses Plus Student 5,361 Points@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) {
/************************************************* PAGE: 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; }
}