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

Tomasz Sporys
Tomasz Sporys
11,258 Points
Posted by 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
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,009 Points
jason chan
jason chan
31,009 Points

Have a sticky footer. Build for desktop view also.

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

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.

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Use Bootstrap!