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
Danilio Moreno
929 PointsMargins are not working, no spacing between pic and wording wraps around in mobile mode.
My code is the same as nick's but not working, it does float left but the rest of the code does not seem to work.
/*******************
PAGE ABOUT
*******************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
Guil Hernandez
Treehouse TeacherHi Danilio Moreno,
Can you please post the rest of the CSS? Your code looks correct, but it looks like you have a closing } that I'm not sure which rule it belongs to. :)
Danilio Moreno
929 Points@media screen and (min-width: 480px) {
/****************************
TWO COLUMN LAYOUT
****************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/***********************
PAGE: PORTFOLIO
***********************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n)
clear: left;
}
/*************************
HEADER
**************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
Danilio Moreno
929 PointsThe wording no longer wraps around, but when I shrink the page to mobile mode the picture does not stack on top of the wording. Please help!!!!
3 Answers
Guil Hernandez
Treehouse TeacherIn that case, your media query looks fine. If the issue is happening in the "mobile view," it sounds like it might be the code in your default/main CSS—not the media query.
Danilio Moreno
929 PointsI've gone step by step and everything has worked properly up till now. Iooked at my css in main, could this be it?
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%
}
Danilio Moreno
929 PointsHow do I go about double checking that? Everything has gone according to the videos up till this point.
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am not currently looking for new design work, but I am available for speaking gigs and similiar engagements. If you have questions, please don't hesitate to contact me!</p>
<p> Please only use phone contact for urgent inquiries. Otherwise, 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:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
</ul>
</section>
Guil Hernandez
Treehouse TeacherHi there,
It looks like you're also missing a ; after the value 40%:
#secondary {
width: 40%
float: right;
}
Danilio Moreno
929 Pointsactually that is a typo on my part, it is there on my css
Sean T. Unwin
28,690 PointsRemove float: left; from the header rule in main.css.
i.e (main.css)
/**********************************
HEADING
***********************************/
header {
float: left; /* Remove this line: */
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Danilio Moreno
929 Pointsremoving the float screws up the rest of my page, for example, when I enlarge the Portfolio Page the About and Contact disappear and the first picture is out of alignment. On the About page the darker green background behind the Portflio About and Contact wording is still there even though the background was removed.
Danilio Moreno
929 PointsDanilio Moreno
929 Pointsthe } at the very bottom is from the @media screen and (min-width: 480px) {