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
rgcode
649 PointsAdjust Profile Page: Floating Profile Picture to Left (Mobile View)
Browser: Firefox Class Video = http://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adjust-the-profile-page-and-header
Hi, all. The code (as shown in class video) worked well at tablet and desktop widths. It properly created a 2-column layout (with profile photo on the left, and the "About" headline and text on the right). So far, so good.
responsive.css code =
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
However, the code did not function properly when I narrowed the page to a mobile view. The image correctly floated to the left, but the text wrapped along the right side. The text did not properly follow a one-column (mobile) view underneath the photo.
main.css code =
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
about.html =
<div id="wrapper">
<section>
<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
index.html =
</header>
<div id="wrapper">
I've spent a handful of hours re-watching past class videos and reviewing my code line-by-line. I've read previous (Treehouse forum) threads explaining there are some glitches associated with the Firefox browser. I implemented one of those forum recommendations to fix an earlier Firefox glitch. But I can't pinpoint how to fix the code for this particular lesson. My web display does not match the course video.
Thanks in advance for any help/suggestions!
5 Answers
Hugo Paz
15,622 PointsCan you show where the text is?
rgcode
649 Pointssee link here: http://web-tni27tv1f5.treehouse-app.com/about.html
mobile view doesn't work correctly.
Nick Pettit
Treehouse TeacherHi rgcode,
There's an error in the video for Firefox browsers. You can find a correction in the teacher's notes associated with the video.
EDIT: Sorry! Wrong video. The Firefox correction is actually in the video Style New Pages.
rgcode
649 PointsRe code recommendation (firefox) ''.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; } }''
Hi, Nick:
I had already used your recommended code in my main.css page. I also applied it to my responsive.css page. The refreshed webpage results did not work in terms of matching the video lecture. When I applied the recommended code to my responsive.css page, It centered the photo and text into a 1-column view. But the video lecture showed a 2-column (desktop) view that transitions to a 1-column (mobile) view. (In my test, the recommended code generates a consistent 1-column view- which differs from the class lecture's 2-column view).
Moreover, my navigation header code (responsive.css) is not functioning and does not match the course video.
''/**************************************** HEADER ****************************************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }''
I don't know if I'm making an error (very possible... a missing bracket? or ?) or if the video has another glitch?
At this point, my code and web page are (materially) diverging from the course lecture. I could press on, but I'm not sure if these structural errors would prevent me from properly completing the course.
Please advise. I appreciate your guidance and help. Thanks, Nick!
Nick Pettit
Treehouse TeacherHi rgcode,
Sorry you're still having trouble. It's pretty difficult for me to tell what the problem is without seeing the entirety of your project. My recommendation would be for you to download the code samples associated with the video and compare them to your code.
If you're still having problems, then download your Workspace to a zip file (it should be in the file menu) and then post a link to it here either using Dropbox or some other file hosting service. That way either myself or another student can download it and take a look.
Thanks for being patient! Coding requires a lot of it. :)
Jon Edwards
7,913 PointsI may have found a solution to your problem, I was having exactly the same problem. ("about" page won't display in a single column, the text instead wraps about the image in a two column layout) However, I can't tell for sure, if Nick would care to chime in again. (Having a good time building this site Nick, thanks!)
In my Chrome browser, for some reason it will not allow the page to scroll to a small enough width for the single column effect to take place. Once I opened my project file in IE, the one column layout appeared as the window got very thin. Seems to work in Firefox as well.
The break point seemed to be when the "About" heading was going to be too wide to be contained in the window. However in the video, Nick's page seems to break much sooner than this. For some reason it is not going to the single column layout sooner. I'm going to go ahead and post my files since I'm not sure this is a browser issue, thanks for any help. I'm continuing on in the lesson but will check back.
Thanks!
Here is a link to my zipped site on Dropbox:
https://www.dropbox.com/s/p2itonlpgy3x3f1/Jon%20Treehosue%20test%20website.zip?dl=0
Jon
Edit, btw I have tried many solutions, including changing the string length on the heading, making sure the image was square, adding a clear:both again to the image, adding a display:block, they never seem to stack up. Perhaps the solution is to simply add two sections as in the previous contact page instead of using the shortcut method.
Jon Edwards
7,913 PointsYay I figured it out! The solution is to make sure in the document responsive.css that your braces for the media query rule fully surround the profile-photo. (the 480 px one).
I discovered this by clicking on each curly brackets one at a time. In a program such as Brackets, the closing curly bracket will be highlighted as well. This is when I discovered that the code for the photo was not inside the media rule.
Thanks for the tip of comparing it line by line to the project file. Until the next time I show up for help......
:)
Jon
Unsubscribed User
Front End Web Development Techdegree Student 3,955 PointsJon, I want to thank you for posting that answer! It actually makes the whole bit of code make more sense, because I kept asking myself how the code that was outside of the second curly brace for the first break point was going to work. It was one of those obvious things that you don't think about until you have either an a-ha moment or someone points you in the right direction.
Tomáš Komprs
14,057 PointsTy! I had same problem right now, and this help me out :-D
rgcode
649 Pointsrgcode
649 PointsI tried to cut and paste the image into here but it doesn't work. I'll try to explain below.
IMAGE HERE ON LEFT SIDE (Wrapping text begins to the right of image and continues on the next line below.................and continues to next line.............................. and next line.............