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

Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points
Posted by Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points

a 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
Mark Tripney
7,839 Points
Mark Tripney
Mark Tripney
7,839 Points

Hi 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
Yohanan Braun-Feder
6,101 Points
Yohanan Braun-Feder
Yohanan Braun-Feder
6,101 Points

thanks 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...