Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tomasz Sporys
Tomasz Sporys
11,258 Points

How to make sure the website looks good on any device?

Hi guys. I know the question seems to be standard and it's explained in many lessons in many courses on treehouse but, here is the thing. I'm building a website just for practicing. I'm taking "mobile first" approach so at the moment I am just concentrating what the website looks like on the phone.

  1. I have used my desktop browser and made it as narrow as possible to simulate the mobile view. 2. Uploaded the files to see the website on the actual device like smartphone, and was shocked:0
    It was not even close to what I expected. Everything was very, very tiny. and the footer was not on the bottom despite the fact I made it "sticky"(and it was but on desktop). I've checked mulit device web testers and they are crap! It has nothing to real look of the website on the device.

Could please someone explain to me what is going on and what steps I should take? Thanks for help in advance?

Tomasz Sporys
Tomasz Sporys
11,258 Points

Ok, I think I found the reason. There is something about <meta name="viewport"> that decides how the content is displayed:) Thanks gays anyway

3 Answers

jason chan
jason chan
31,008 Points

Have a sticky footer. Build for desktop view also.

Cześć Tomasz,

I do not see the footer as being sticky on the desktop version, when I remove content from between the navigation and the footer, the footer moves up.

I don't know if you've tried this website, but this site might have more accurate display of what the site looks like on multiple devices: https://www.browserstack.com/responsive

You'll need to look into changing font-size, this page might be able to help with this.

Use Bootstrap!