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!

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

HTML

Michael Davis
PLUS
Michael Davis
Courses Plus Student 12,508 Points

Twitter link not showing up in contact page

From contact.html

<section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone"><a href="tel:555-6425">555-6425</a></li>
    <li class="email"><a href="mailto:emailme@example.com">emailme@example.com</a></li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
  </ul>
</section>

I am following along with the "How to Make a Website" -> "Build the Contact Page" video, and have encountered an issue twice now that I have never had happen before. My link does not render to the DOM. If I select all the elements of my list on the webpage, I have the phone number, and the email addres, and the bullet point for the twitter... but no text. I went into developer tools to 'Inspect Element' and there's a long list of entries in "inline:16" that explicitly force a display of "display:none".

a[href^="http://www.linkedin.com/shareArticle"],
a[href^="http://www.google.com/bookmarks/mark?"],
a[href^="http://www.friendfeed.com/share?"],
a[href^="http://www.facebook.com/sharer/sharer.php"], a[href^="http://www.facebook.com/sharer.php?"],
a[href^="http://www.facebook.com/share.php"],
a[href^="http://www.digg.com/submit?"], 
a[href^="http://wow.ya.ru/posts_share_link.xml"],
a[href^="http://vkontakte.ru/share.php"],
a[href^="http://vk.com/share.php"],
a[href^="http://twitthis.com/twit?url"],
a[href^="http://twitter.com/share?"],
a[href^="http://twitter.com/intent/tweet?"],
a[href^="http://twitter.com/?status="], 
....
.... {
display: none !important;
}

Seeing as this is a step of the flow, and working within the workflow is encouraged, i find it odd that these are being blocked. Had I known, I would have omitted it. Instead, I've lost two hours over this. Not that it's that big of a deal, but I don't think the average user would think to investigate into the DevTools, and drive down into the "Behind the Scene" CSS rules that supersede our own.

The same exact thing occurred when I tried to use the "social-icon" class. I had to rename it to 'social' in order for my CSS to work and the images to display. Those classes are also in this "display: none !important;" list.

Having said all of that, am I mistaken? Did I just make a simple typo into something so far left-field that it's no longer even playing the same game?

[EDIT 10:38 CST 02/09/2017] On a side-note: How do I specify, more specifically, that this post is referring to the video/lesson in question? The only option I saw was for "HTML".

Hi Michael,

Thanks for asking your side-note question and being concerned about that. Every video, quiz, and code challenge has a "Get Help" button. If you click that button, you'll get a popup modal box. If you ask your question through that interface then your question will be automatically linked to that content.

For your main question -

Are you finding this css through the workspace preview?

Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

Okay, so this is absolutely fascinating! First, to your question Jason. Yes, the CSS I showed was through the workspace preview, then using the Developer tools to inspect each element to 'trace' where the issue was stemming from.

The interesting part is now that I've stepped away and had dinner, I came back to continue the lecture and found that the preview is now showing his twitter link. I changed no code! This is really sending my brain into major recoil, lol! I don't understand it, which i really find fascinating. I'm at a loss for explanation..

1 Answer

Hadi Khalili
Hadi Khalili
7,969 Points

I tested your code it works fine. The problem might be somewhere else. fork your workspace so we can inspect the whole code.