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
Tristan Brown
590 PointsMy icons aren't moving to the right with the rest of my contact details.
In the desktop size of my page, the contact info moves to the right but the icons stay to the left getting in the way of the #primary section. the mobile size looks fine though.
~responsive.css~
@media screen and (min-width: 480px) { /************************** TWO COLUMN LAYOUT **************************/ #primary { width: 50%; float: left; }
#seconday {
}
}
@media screen and (min-width: 660px) {
}
~main.css~
/************************** GENERAL **************************/ body { font-family: 'Slabo 27px', Oswald; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; clear: left; }
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: 'Slabo 27px', Oswald; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 1em; margin: -5px 0 0; font-weight: normal; }
/************************** NAVIGATION **************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav a { font-family: 'Oswald', 'Slabo 27px'; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800px; padding: 15px 10px; }
/************************** FOOTER **************************/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 25px; height: 25px; 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.75em; color: #bdc3c7; }
/************************** PAGE: ABOUT **************************/ .profile-picture { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 10%; }
/************************** 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('../images/phone.png'); }
.contact-info li.email a { background-image: url('../images/mail.png'); }
.contact-info li.twitter a { background-image: url('../images/twitter.png'); }
/************************** COLORS **************************/
/* site body */ body { background-color: #fff; color: #999; }
/* grey header*/ header { background-color: #696969; border-color: #000000; }
/* logo text */ h1, h2 { color: #fff; }
/* nav background on mobile */ nav { background-color: #444443; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #000000; }
a { color: #000000; }
~contact.html~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tristan Brown | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px|Oswald' 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>Tristan Brown</h1>
<h2>Web 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 always looking for new work opportunities! If you have any questions, you can reach me by phone, email, or Twitter.</p>
<p>Feel free to leave a voicemail if I don't answer a phone call right away. I will get back to you the same day.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:503-278-0696">503-278-0696</a></li>
<li class="email"><a href="mailto:legonerdtb96@gmail.com">legonerdtb96@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=triss66">@triss66</a></li>
</ul>
</section>
<footer>
<a href="https://twitter.com/gmail_tristan"><img src="images/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/tristan.brown.313"><img src="images/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>
<p>© 2015 Tristan Brown.</p>
</footer>
</div>
</body>
</html>
Tristan Brown
590 PointsAh yes! I fixed the typo and it worked no problem. Thank you so much :)
1 Answer
Zaid Shakil
3,198 PointsPosting code might help
Tristan Brown
590 PointsOh, sorry. Ill put it up
Zaid Shakil
3,198 PointsDon't forget CSS too if it's in a separate file
Tristan Brown
590 PointsIm not sure how to do that.. heh. sorry im still a bit new to this website.
Tristan Brown
590 PointsOkay, I added it in the question :)
Zaid Shakil
3,198 PointsThere are just too many files you are using :p I am not able to run your website and replicate your problem. Post all css files. I think you missed normalize.css
Tristan Brown
590 PointsI fixed it! It was just a typo in my responsive.car xD thank you for replying though :)
GERARDO MARTINEZ GOMEZ
2,134 PointsGERARDO MARTINEZ GOMEZ
2,134 PointsHi! I think it´s a typo error, check de ID Secondary you got "seconday".