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 trialYohanan Braun-Feder
6,101 Pointsa few issues with layouts and responsive design
first, on the contact page, the background images for twitter and email are not showing even though the phone image is and they are in the same folder and the code from the first line was copied over 2 more times.
<section id="primary">
<h3>General info</h3>
<p>want to hire me? have any questions? conatct me soon!</p>
<p>please only use phone contact for urgent inquiries. otherwise send an email</p>
<p>this is another paragraph to test</p>
<p>this is another paragraph to test</p>
<p>this is another paragraph to test</p>
</section>
<section id="secondary">
<h3>Cotact details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-5555">555-55555</a></li>
<li class="mail"><a href="mailto:yb@example.com">yb@example.com</a></li>
<li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=yb2517">@yb2517</a></li>
</ul>
</section>
main.css
/*start of css*/
/*********************
PAGE: CONTACT
**********************/
.contact-info {
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
clear:both;
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')};
**second, on the same page, when the width changes to allow the media query rule to switch to 'true', the ul li a items that house the contact links do not transfer to the right (even though the h3 element in that section is).
third, on the portfolio page, the images are not resizing properly to 28.33333% even when the width of the window increases.**
responsive.css
/*start of css*/
@media screen and (min-width: 480px) {
/*********************
TWO COLUMN LAYOUT
**********************/
#primary {
width:50%;
float: left;
}
#seconday {
width:40%;
float: right;
}
}
@media screen and (min-width: 660px) {
/*********************
PAGE: PORTFOLIO
**********************/
#gallery li {
width: 28.333333333333%;
}
#gallery li:nth-child(3n + 1) {
clear:left
}
}
using firefox on a mac
thanks for any help
2 Answers
Mark Tripney
7,839 PointsHi Yohanan,
Glancing quickly through this, I notice you've missed the semi-colon (;) from your
#gallery li:nth-child(3n + 1) {
clear:left
}
Should be...
#gallery li:nth-child(3n + 1) {
clear:left;
}
Yohanan Braun-Feder
6,101 Pointsthanks Mark, i fixed that, it did fix an issue with the gallery acting up, but hasn't yet solved the part where the images line up 3 in a row. I also found one typo that caused the secondary section to break and fixed that. why can't i seem to make the gallery line up, i can't find the answer...