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
Mikey rizkalla
5,525 Points.contact-info a {} is not changing anything in the contact info
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
I added this to my css and it looked exactly the same as before i added it. is there some kind of mistake in the code?
6 Answers
Richard Nicholls
1,301 PointsHi, I can see the problem. You have an unordered list with a class of contact-info but the problem is your unordered list has its closing tag in the wrong place. Just move the /ul to below the last li just above the closing section tag
Steven Parker
231,269 PointsI notice you are changing some background options, but you don't establish a background, so unless one is established elsewhere these won't do anything visible. The other changes will only affect spacing.
Did you remember to save your edits (using the menus or the control-s shortcut)?
Also, after you save, you need to refresh your browser preview.
Mikey rizkalla
5,525 PointsThe issues that I'm having are with the spacing. Even with the margin and the padding that i added. Yup its all saved and i refreshed the browser.
should i post the whole CSS and html file?
Richard Nicholls
1,301 PointsWe need to see the html of the contact page and all of your css. Have you added media queries yet? It may be that you have another css page for when the screen is bigger and this may be why you cant see the changes on the size screen you are on
Mikey rizkalla
5,525 PointsSo far I only have the the css page for mobile. I haven't added any media queries yet.
here is the html for the contact page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Mikey Rizkalla | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>mikey rizkalla</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">Contact</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>general</h3>
<p>blablabla blablabla questions fuck off</p>
</section>
<section>
<h3>Contact</h3>
<ul class="contact-info"></ul>
<li class="phone"><a href="tel:555-6555">555-6555</a></li>
<li class="mail"><a href="mailto:mikeyrizkalla@live.com">mikeyrizkalla@live.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<p>© 2016 Michael Rizkalla.</p>
</footer>
</div>
</body>
</html>
here is the all the css:
/***************
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: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5 0 0;
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: 50px;
color: #ccc;
}
.social-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;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***************
PAGE CONTACT
****************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
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');
}
/***************
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;
}
/*link*/
a {
color: #6ab47b;
}
/*Nav link*/
nav a, nav a:visited{
color: #fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
Mikey rizkalla
5,525 Pointsamazing I never would've found that. thanks Richard!