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 trialLiberty Bollen
729 PointsI'm replicating everything, but it's not all showing in my preview browser, e.g. Contact us text alignment and imagery.
For example, I've included the below, but the images are no appearing in my preview. I've checked all the coding in index.html and contact.html and it replicates everything I've been shown. This is happening for text alignment as well. I'm using Firefox as Google kept crashing...would this be an issue?
.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.phone a { background-image: url('../img/mail.png'); }
.contact-info li.phone a { background-image: url('../img/twitter.png'); }
4 Answers
filipepacheco
Full Stack JavaScript Techdegree Student 21,416 PointsHi, Liberty, Could you post the css code you used for this?
Liberty Bollen
729 PointsHi Filipe and thanks for getting back to me.
I realised that I hadn't put </ul> after the list items in contact.html, but instead before them. So that has resolved the image issue. However, the paragraphs under <h3> on About us and Contact pages are not matching the video results, but are aligning tightly to the left of the page. See what I mean here http://port-80-h49ko4f14i.treehouse-app.com/about.html
The <h3> coding in the css under General is:
h3 { margin: 0 0 1em 0; }
With no <p> styling
This is what I have for About and Contact in CSS
/******************************** 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 20px; font-size: 0.9em: }
.contact-info p { margin: 0 20px; padding: 20px 0; }
.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'); }
Can you see anything obvious I'm missing?
Thanks
Liberty
Robert Tyree
13,335 PointsHi there,
I'm not sure what your end goal is, but if you're trying to center align the profile photo, about and contact info you'll want to center your div with the id "wrapper" by setting the margin to auto.
#wrapper {
max-width: 940px;
margin: auto;
}
You can center the text using this CSS, but again, not entirely sure centering is the end goal
h3, p {
text-align: center;
margin: auto;
}
Good luck!
Liberty Bollen
729 PointsHi Robert
Thank you so much for your help. I will want to centrally align eventually, so this has been very helpful.
I'm getting there slowly!