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

Natalia C.
Natalia C.
2,027 Points

'Front-End web development' Track | How to make a website : Layout Issues

Hi all, I'm at stage 8, at the testing phase.

I've completed every step correctly so far. I've downloaded the project files before asking to see if there's anything different in my code, but it's not. Everything is the same with Nick's files.

When I made the adjustments for wider devices with media queries (at least this is where I noticed it to be honest), my "original" layout for mobile (since that's our main.css - for mobile), screwed up a little.

Here's a link where you can see how the site is rendered in many devices. It's live, so you can navigate through the pages.

http://deviceponsive.com/?url=http%3A%2F%2Fweb-x0xpt7xmml.treehouse-app.com%2Fabout.html#

My main issues are:

  • The 'about' page In some cases the photo is not where it should, but on the right of the header instead (!!!!!)

-The 'portfolio' page: The gallery isn't displayed correctly on IPhone, although it's fine on Galaxy-y. (There's a chance the problem isn't only on iPhone, but on every similar-sized device)

  • Less important: The image styling (example the border-radius set to make it a circled image) isn't working on all devices. Also, it's not centered as it should in many cases.

Any ideas???? :)

Philip Cox
Philip Cox
14,818 Points

Have you tried re watching the video?

1 Answer

Ricky Catron
Ricky Catron
13,023 Points

It may not be the device size. As soon as you said:

"Less important: The image styling (example the border-radius set to make it a circled image) isn't working on all devices. Also, it's not centered as it should in many cases."

My first thought was it doesn't support border-radius. It is likely that the browser is simply not up to date.