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
Anders Sandqvist
690 PointsTwitter handle disappers when using the link in the video. Is writing the link that way obsolete?
Here's how I wrote the list element for the Twitter contact info:
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sandqvistanders">@sandqvistanders</a></li>
The bullet point for the list item remains but without any content. I'm using Firefox.
4 Answers
Greg Kaleka
39,021 PointsNo, that code works just fine. The problem is likely in your CSS. Having taken this course, I bet your anchor elements are set to be white, from the header, and they're still white in the body. If that's the case, the handle is showing up, it's just white on white, so you can't see it. Highlight where it should be to check.
If not, please share your CSS.
Anders Sandqvist
690 PointsIf that is the case shouldn't I be able to click the white link? The other two are showing up just fine and if I link to a different web adress so does the Twitter one.
Greg Kaleka
39,021 PointsHm. Yes you'd be able to click it. Very strange. I added your css to the Codepen I set up, and it works fine. Just colors the link green, which I assume you want. Not sure what's going on with your setup...
Anders Sandqvist
690 PointsHere is the CSS in its entirety:
/**************************************
GENERAL
***************************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/**************************************
HEADING
***************************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Cantarell', sans-serif;
margin: 15px 0;
font-size: 1.75em; /* em = font size relative to 16 pixels */
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0,75em;
margin: -5px 0 0; /* first value=sets top, second=left and right, third = bottom */
font-weight: normal;
}
/**************************************
NAVIGATION
***************************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**************************************
FOOTER
***************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50 px;
color: #ccc;
}
.phone-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/**************************************
PAGE: PORTFOLIO
***************************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/**************************************
PAGE: ABOUT
***************************************/
.profile-photo {
display: block;
clear: both;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/**************************************
COLORS
***************************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Anders Sandqvist
690 PointsIt's weird. If I type the link into my browser's adress bar it also shows up just fine but as soon as I add it to my html the link disappears.
I wonder if it's a browser issue... at least it's not me then.
Thank you for looking into it!