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
Brooke Bryan
930 PointsBackground icons don't stay in line from mobile size to larger size, icons end up under text. Why?
I am trying to get my background icons to move in line with the correlating text. They line up when I'm in mobile version but when I expand the screen size they end up under the text in the wrong column. I don't know what I'm doing wrong. I've included my code and css.
main.css
/******************************* GENERAL *******************************/
body { font-family: 'Dosis', 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: 'Shadows Into Light', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2{ font-size: 0.75em; margin: -5px 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-width: 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'); }
.contact-info li.facebook a { background-image: url('../img/facebook.png'); }
/******************************* COLORS *******************************/
/* site body */ body{ background-color: #fff; color: #999; }
/* blue header */ header { background: #0066FF; border-color: #00FFFF; }
/* nav background on mobile */ nav { background: #0066FF; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a{ color: #0066FF; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #00FFFF; }
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
contact.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Brooke Bryan | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Dosis:500,600,700,800|Shadows+Into+Light' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Brooke Bryan</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" >Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am currently looking for new design work and am seeking employment. If you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Facebook, Twitter, and email are the best way to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:984- 377- 2583">984- 377- 2583</a></li> <li class="mail"><a href="mailto:brookebryan@sterlingblue.net">brookebryan@sterlingblue.net</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=sterlingbluebb">@sterlingbluebb</a></li> <li class="facebook"><a href="http://facebook.com/profile.php?id=100005716278274">Brooke Bryan</a></li> </ul>
</section>
<footer>
<a href="http://twitter.com/sterlingbluebb"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/profile.php?id=100005716278274"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Brooke Bryan.</p>
</footer>
</div>
</body> </html>
4 Answers
Cesar De La Vega
13,900 PointsThe code below gives you the outcome I believe you desire.
.contact-info { display:inline-block; min-width: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0px 0 10px; }
Cesar De La Vega
13,900 PointsHi Brooke! do you have a link to a live site ?
Brooke Bryan
930 PointsSure Cesar, here ya go! http://port-80-c4n4ujion8.treehouse-app.com/contact.html
Brooke Bryan
930 Pointsnope that didn't work either. It made the background images stay aligned left but that's not the correct location when you expand to tablet or desktop size.
Cesar De La Vega
13,900 Pointshmmm where are they supposed to go when on tablet or desktop? I tested it on all devices on my end and it always stays to the left of your contact information.
UPDATE : I was looking at your code and on the #secondary id you forgot to close the width **
It should look like this (add semi-colon after 40%) :
secondary{
width:40%; float:right; }
Brooke Bryan
930 PointsBrooke Bryan
930 PointsThat worked perfectly! Thank you so much!