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

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Icons from contact page are misplaced

Hello!

So when I changed the code for the actual two column layout, my icons from my contact page appeared all the way over to the left on top of my text. I checked my code and it was all correct then tried in different browsers (chrome and firefox). All with the same problem.

Then I downloaded a copy of the css from the project files and just replaced my own with that and the problem persisted.

Any ideas? Thanks!

4 Answers

Using chrome right click on the problem element and select inspect element. This will show the developer console window. The main top window (the one with elements tab selected) shows the HTML and the smaller window to the right (with styles tab selected) shows what CSS styles are being applied. The bottom window is the javascript console but don't worry about that now.

Using the styles window to the right, look at the list of styles and see what is being applied or not being applied that might be causing issues. You can also go in there and turn styles off, change values or add styles on the fly to see what might fix your issue.

The developer console is a great way to debug your site!

Thanks!

From what I can see the problem can be fixed using this

.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.E. removing "display: block", but when I do that I lose the formatting (the space between each of them) and trying to change the padding or margin does not seem to work. Anymore suggestions?

Will!

Hmm it's hard for me to tell without seeing the actual css and html.

Are they floated? Try adding float: none; and see what happens. Or try making it display: inline-block;

Also do you have position: absolute or position: relative set anywhere in your css?

But it sounds like to me that its one of those as it's a layout issue. It can also be a class given to the parent element as well that is causing the issue.

Got it Daniel Jackson!

Thanks for your help!