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 Adjust the Profile Page and Header

About page/picture is disappearing on mobile view. Shows when css changed to display: inline-block.

But when I change the css to inline-block I can not center the picture for mobile view. (When I am downloading the project it is the same situation.)

Adrian Randall
Adrian Randall
4,807 Points

Please paste your HTML and CSS

Hi Adrian! Thank you for reply. Here is the code: https://w.trhou.se/gqoytrkxom

3 Answers

This seems to be a problem only in Firefox. When viewing http://treehousewebsite.com/about.html in Firefox (38.0.5), the profile-picture disappears and sits out of the viewport, right of the header.

There are several ways I tried which fix this issue in Firefox, but I don't really know why:

  1. give the profile-picture class a clear property of left, right or both. or
  2. give the section which includes the "about me" text a clear property of left, right or both or
  3. Float the section which includes the "about me" text left or right.

Hi! Thanks for reply. I am testing the responsivenes of the website on firefox and when I resize it to mobile view, the picture should go to the top and the text should stack under the picture, unfortunately the picture is disappearing from the view. Its appearing back when I change CSS the display: inline-block but then I am not able to center the picture.

oanapopa
oanapopa
3,510 Points

Same for me as Natalia is saying. I tried viewing the site with Google Chrome and the problem disappeared. Maybe it has something to do with the way Mozilla is displaying the page? Or maybe the normalize.css file?

Vincent Jo
Vincent Jo
2,619 Points

Hi Natalia,

I checked out the code and tested it with an actual link to a picture that I uploaded, and everything seems to work fine. I think it's just the placeholder (the broken picture link) that disappears. Try uploading your own picture and test the website again. Let me know if that solves your question. Thanks!

Adrian Randall
Adrian Randall
4,807 Points

Yep, agree with Vince, looks like broken links