Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

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.

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

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

  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

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