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

HTML

Posted by Stephanie Person
Stephanie Person
2,281 Points

Icons overlapping when becoming responsive/ adding second column

Here is my Contact page and responsive.css. My contact icons keep overlapping the paragraph text and I can't find what I am missing

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stephanie Person | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic,700,700italic|Comfortaa:400,700|Philosopher:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/Responsive.css"> </head> <body> <header> <a href="index.html"id="logo"> <h1>Stephanie Person</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 Imformation</h3> <p>I am currently looking for design work with websites and mobile apps. I am also available as a blogging assistant for beginner bloggers.If you have any questions please don't hesitate to contact me!</p> <p>Please only contact me by email or phone with serious or urgent inquiries. Otherwise the best way to reach me is through social media; Twitter, Facebook and Instagram.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel: (774) 633-4622"> (774) 633-4622 </a></li> <li class="mail"><a href="mailto:methodpreneur@gmail.com">MethodPreneur@Gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=methodpreneur">@MethodPreneur</a></li> </ul> </section> <footer> <a href="http://twitter.com/MethodPreneur"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/stephieleigh.person"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Stephanie Person.</p> </footer> </div> </body> </html>

Responsive.css

@media screen and (min-width: 480px) {

/************************ NAVIGATION ************************/

primary {

width: 50%; float: left; }

secondary {

width: 40%; float: right;
}

}

@media screen and (min-width: 660px) {

}

9 Answers

Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

ok, some padding on the left:

.contact-info li.phone a { background-image: url('../img/phone.png'); padding-left: 2em;}
Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

Would adding inline-block to the social-media icon class help?

Stephanie Person
Stephanie Person
2,281 Points
Stephanie Person
Stephanie Person
2,281 Points

like this? or am i putting it in the wrong spot?

.contact-info li.phone a { background-image: url('../img/phone.png'); display: inline-block; }

.contact-info li.mail a { background-image: url('../img/mail.png'); display: inline-block; }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); display: inline-block; }

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

I copied your html and the little bit of css, that you posted. I put in two images 50x50px for the twitter and facebook pngs. I don't see any overlapping of text. The 2016 Stephanie Person falls below the social media icons.

There are supposed images next to the contact info, is it the Contact information that is overlapping?

Stephanie Person
Stephanie Person
2,281 Points
Stephanie Person
Stephanie Person
2,281 Points

yes, my icons on the bottom are fine but they gray images next to the contact info are what is overlapping

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 7,294 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

How about this:

.contact-info li.phone
{
list-style-image: url(../img/phone.png);

}
Stephanie Person
Stephanie Person
2,281 Points
Stephanie Person
Stephanie Person
2,281 Points

It takes away the gray icons completely leaving the contact info by itself. which looks fine but still doesn't explain why the icon won't line up with the info.

Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

I saved phone.png as a green square, and it is showing up right next to the phone number.

Maybe if you upload all of the css that you are using, it could be more helpful.

Stephanie Person
Stephanie Person
2,281 Points
Stephanie Person
Stephanie Person
2,281 Points

here is the main css

/************************ GENERAL ************************/

body { font-family: 'Josefin Slab', Comfortaa, Philosopher; }

wrapper {

max-width: 940px; margin: 0 auto; padding 0 5%;
}

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1m 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: 'Josepfin Salb', Comfortaa, Philosopher; 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; }

nal 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: #bdc3c7; color: #000; }

gallery li a p {

margin: 0; padding: 5%; font-size: 1em; color: #000; font-weight: bold; }

/************************ 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: #ff3333; border-color: #ff1a1a; }

/*nav background on mobile */ nav { background: #e60000; }

/* logo text */ h1, h2 { color: #fff; }

/* links*/ a{ color: #ff3333; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #990000; }

and the index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stephanie Person | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic,700,700italic|Comfortaa:400,700|Philosopher:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/Responsive.css"> </head> <body> <header> <a href="index.html"id="logo"> <h1>Stephanie Person</h1> <h2>Designer</h2> </a>
<nav> <ul> <li><a href="index.html"class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul>
</nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt""> <p>Playing with blending modes in Photoshop.</p> </a> </li><li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt""> <p>Drips created using Photoshop brushes.</p> </a> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/TieDyendTattoos"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/stephieleigh.person"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Stephanie Person.</p> </footer> </div> </body> </html>

Stephanie Person
Stephanie Person
2,281 Points
Stephanie Person
Stephanie Person
2,281 Points

Yay!!! that worked. Thank you so much for the help :)

Unsubscribed User
Unsubscribed User
Courses Plus Student 7,294 Points

Whew! Glad that I could help!