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
chunlingzhou
596 PointsProfile page in mobile view does not show text beneath the photo
/*******************************
PAGE: ABOUT
********************************/
.profile-photo {
float: left; /* this does not work */
margin: 0 5% 80px 0;
}
The above code is from my responsive.css by following the instructor Nick's sample code.
And here is the .profile-photo part CSS in my main.css:
/*******************************
PAGE: ABOUT
********************************/
.profile-photo {
clear: both;
display: block; /* add a little more flexibility */
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%; /* make it circular */
}
But these code do not render the profile text to be underneath the profile photo when in mobile view, instead, it still shows part of text to the right of the profile photo.
I saw quite a few other students also have the same problem by following the instructor's code in the video.
Can the instructor please check on the video and see if there is anything missing in the video, and why us students' result are different from the instructor's(in mobile view)?
Appreciated in advance!
2 Answers
geoffrey
28,736 PointsHi chunlingzhou, try to use markdown when you post on the forum, get used to it, It makes your code readable and thus It's easier to help you ! :)
Anyway, I checked the video and I downloaded the project file. What I have as result on mobile view when checking the about page as you do, is just the text with no picture displayed (under firefox, but using google chrome it's perfectly displayed as in the video).
By looking at the html, the img is however there and has a display:block property, so no reason to not be able to see it (hence the fact that's being displayed correctly using chrome).
On your side It seems you only see some part of the text just next to the photo, It seems different as result, what browser do you use !? I'm curious.
Anyway I managed to fix it quickly, in the main.css page, where you have your styles applied for the mobile version I changed this part of the css.
/**********************************
PAGE: ABOUT
***********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
To this instead
/**********************************
PAGE: ABOUT
***********************************/
section{
text-align:center; // simply to center the profile image
}
.profile-photo {
max-width: 150px;
border-radius: 100%;
}
section p, section h3{
text-align: left;
}
It's almost the same as the video, for sure you could still tweak it. However, I don't really understand why there is such a rendering difference between chrome & firefox for this on my side. I haven't checked that much but there are maybe some different defaults styles applied between browsers. Maybe Nick Pettit could enlight us on this point.
I hope I could help you.
Stephen Jackson
1,229 PointsI had the same problem. My solution was that I had gone below the container brackets for the mobile phone media query. For example, what should look like this
@media screen and (min-width: 480px) {
/***********************
PAGE: ABOUT
***********************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
Instead looked like this
@media screen and (min-width: 480px) {
}
/***********************
PAGE: ABOUT
***********************/
profile-photo {
float: left;
margin: 0 5% 80px 0;
}
so it wasn't recognizing that part of code as needing to be read for mobile devices. Hope this helps you.
geoffrey
28,736 PointsYep, in this case It's because you forgot to add the "." before the class name... But even with it, it seems some browsers don't display the page well in mobile view with the given code in the tutorial. That's why I posted my modifications above.