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

Posted by Natalia Yok
Natalia Yok
992 Points

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
Adrian Randall
Adrian Randall
4,807 Points

Please paste your HTML and CSS

Natalia Yok
Natalia Yok
992 Points

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

3 Answers

vftwm
vftwm
17,516 Points

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.
Natalia Yok
Natalia Yok
992 Points
Natalia Yok
Natalia Yok
992 Points

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
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
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
Adrian Randall
Adrian Randall
4,807 Points

Yep, agree with Vince, looks like broken links