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

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

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

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