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

Design

Ephraim Smith
Ephraim Smith
11,930 Points
Posted by Ephraim Smith
Ephraim Smith
11,930 Points

"Contact Details" icons locked on left side of screen at >480px wide.

After reviewing final appearance of 1st project, I noticed the phone, e-mail, and twitter icons on the contact page jump to the left side of the screen (behind the "General Information" paragraph) when width is >480px. Not sure if this is a main.css or responsive.css issue. Thanks in advance guys.

Frederick Reiss
Frederick Reiss
15,003 Points

Hello Ephraimsmith,

Please provide a URL of the project that you are working on. I may be able to help.

Thank You,

Fred Reiss

2 Answers

Frederick Reiss
Frederick Reiss
15,003 Points
Frederick Reiss
Frederick Reiss
15,003 Points

I need one more piece of information, send me the URL of what the instructor was teaching, I am trying to recreate what led you to this... I need to set up a workspace to work through it. Thanks again -fred reiss

Frederick Reiss
Frederick Reiss
15,003 Points
Frederick Reiss
Frederick Reiss
15,003 Points

  1. It may be helpful to download an app called notepad++... and compare what you typed into your Workspace, with my version of about.html; main.css; responsive.css .

  2. I know that sometime I have to repeat a whole section because it is easy to miss little details.

  3. First compare my about.html with yours, remember that order is very important here.

about.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fred Reiss | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans+Condensed:300|Open+Sans:400,600" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Frederick Reiss</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 and similar engagements. If you have any questions please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"></ul> <li class"phone"><a href="tel:555-6425">555-6425</a></li> <li class"mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class"twitter"><a href="http://twitter.com/intent/tweet? screen_name_rp">@nickrp</a></li> </section> <footer> <a href="http://twitter.com/reissfc"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/reissfc"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2017 Fred Reiss</p> </footer> </div> </body> </html>

  1. Here is what my main.css looks like:

/****************** 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.8em; }

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

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

/****************** Navigation ********************/

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

nav ul { list-stle: 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.75em; color: #bdc3c7; }

/****************** PAGE: About ********************/

.profile-photo { 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 devices */ nav { background: #599a68; }

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

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

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

  1. Here is what my responsive.css looks like:

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

}

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

}

I hope this helps. -fred

Ephraim Smith
Ephraim Smith
11,930 Points
Ephraim Smith
Ephraim Smith
11,930 Points

Thanks a lot for the efforts Fred. I will compare against mine and hopefully find what I messed up. Much appreciated. -E