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

CSS

Posted by ramseydennis
ramseydennis
4,530 Points

Why is my contact-info class selector in my CSS not working via my preview?

I think my code is correct for my "contact-info" class - but it is not working in my preview (bullet points remain, font-size and margins unchanged, etc.)

PS - cache was cleared on my browser -

Thanks -

Link to my full code: https://w.trhou.se/5wjrv1ufpk

What I'm referencing specifically:

<section>
      <h3>Contact Details</h3>
        <ul class="contact-info">Contact Details</ul>
          <li class="phone"><a href="tel:444-5643">444-5643</a></li>
          <li class="mail"><a href="mailto:ramsey@example.com">ram@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=metrocollab">@metrocollab</a></li>
    </section>

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

You have it structured incorrectly. Try this.

<section>
      <h3>Contact Details</h3>
      <ul>
           <li class="contact-info">Contact Details</li>
           <li class="phone"><a href="tel:444-5643">444-5643</a></li>
           <li class="mail"><a href="mailto:ramsey@example.com">ram@example.com</a></li>
           <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=metrocollab">@metrocollab</a></li>
     </ul>
</section>
ramseydennis
ramseydennis
4,530 Points

Hey Chyno,

Thanks for your help - your advice triggered me go back into Nick's video, and I found what I did wrong - this is what it needed to look like - 

html

<section>
      <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:444-5643">444-5643</a></li>
          <li class="mail"><a href="mailto:ramsey@example.com">ram@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=metrocollab">@metrocollab</a></li>
         </ul>

Thanks again -

Chyno Deluxe
Chyno Deluxe
16,936 Points

Awesome! Glad I can help.