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
Jose Pacheco
1,445 Points2 columns not working, icons stay on the left side
It seems my web site create a weird 2 columns align. when Css resposive is applied, icons (mail, twitter and phone) stay on the left side of the page (it seems they are no tied to rigth block).
5 Answers
Wayne Priestley
19,579 PointsHi Jose,
Can you try this and see if it helps:
.contact-info li.Phone a {
background-image: url("../Images/phone.png");
display: inline-block;
}
.contact-info li.mail a {
background-image: url("../Images/mail.png");
display: inline-block;
}
.contact-info li.twitter a {
background-image: url("../Images/twitter.png");
display: inline-block;
}
Wayne Priestley
19,579 PointsChanged to inline-block
Wayne Priestley
19,579 PointsJose,
Just noticed this:
#sencondary {
width:40%;
float:rigth;
}
Typo in the spelling of right
Jason Anello
Courses Plus Student 94,610 PointsTypo in #secondary as well.
Christian McMullin
13,086 PointsI'm having the same issue with my phone icon inside the preview from workspace being on the left in the left column. Wayne's thing didn't work for me.
Jose Pacheco
1,445 PointsThis is contacto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>J.Pacheco | Marketer at work</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Muli|Raleway:500,800,400' 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>Jose Pacheco</h1>
<h2>Marketer at work</h2>
</a>
<nav>
<ul>
<li><a href="about.html">About me</a>
</li>
<li><a href="index.html">My projects</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'm currently working on startup projects</p>
<p>Use email and twitter to reach me. Hit the button</p>
</section>
<section id="secondary">
<h3>Contact details</h3>
<ul class="contact-info">
<li class="Phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:pchaco@gmail.com">pchaco@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=pachecoss">@pachecoss</a></li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/pachecoss"><img src="Images/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<a href="https://www.twitter.com/pachecosss"><img src="Images/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<p>©Jose Pacheco 2015</p>
</footer>
</div>
</body>
</html>
And this is Responsive css
@media screen and (min-width:480px){
/*******************************
TWO COLUMNS
********************************/
#primary {
width:50%;
float:left;
}
#sencondary {
width:40%;
float:rigth;
}
/*******************************
PAGE PORTFOLIO
********************************/
#gallery li {
width:28.3333%;
}
#gallery li:nth-child(4n) {
clear:left;
}
}
@media screen and (min-width:600px){
}
finally, main CSS
/*******************************
GENERAL
********************************/
body {
font-family:'Raleway', 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;
padding:5px 0 0 0;
margin: 0 0 30px 0;
width:100%;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Muli', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 {
margin: -5px 0 0;
font-size: 1.75em;
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 15px;
}
/*******************************
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 ABOUT
********************************/
.profile-photo {
display:block;
max-width:150px;
margin:0 auto 30px;
border-radius:100%;
}
/*******************************
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 {
padding:5%;
font-size:0.75em;
margin:0%;
color:#cba300;
}
/*******************************
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('../Images/phone.png');
}
.contact-info li.mail a {
background-image: url('../Images/mail.png');
}
.contact-info li.twitter a {
background-image: url('../Images/twitter.png');
}
/*******************************
COLORS
********************************/
/* site Body*/
a {
color:#6ab47b;
}
/*green header*/
header {
background:#6ab47b;
border-color:#599a68;
}
/*nav background on mobile*/
nav {
background:#599a68;
}
/*logo text*/
h1, h2 {
color:#fff;
}
/*links */
nav a, nav a:visited {
color:#fff;
}
/*selected nav links */
nav a.selected, nav a:hover {
color: #32673f;
}
/*body background*/
body {
background-color:#fff;
color:#999;
}
Wayne Priestley
19,579 PointsHi Jose,
This is what your website looks like in code pen.
everything looks okay to me as far as two columns go, can you explain what is wrong with this image so i can get a better understanding please.
Jose Pacheco
1,445 PointsHi Wayne,
Thanks for your quick response. Yep, it looks ok displaying two columns when css is applied, the problem is it should be display the small icons (twitter, phone and mail) I described on the Css as the video explain. If I launch my work space, these icons are displayed on the left side crushed with the "general information" column. These icons are added to the page using CSS and not html, I don't know how to share an screen shot of my work place in order to show you this strange format. As i can see, on your version the icons are not displayed.
Wayne Priestley
19,579 PointsHi Jose,
I get it, your talking about the icons that look like a phone, envelope and twitter bird.
Sorry i didn't get it at first.
Ok, i'll take another look.
Jose Pacheco
1,445 PointsHi Wayne and Jason. Works perfectly right now!
Thanks guys!
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Jose,
Could you please post your html and css so we can take a look and help you out.
Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.