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

Joe Consterdine
Joe Consterdine
13,965 Points

How do you know how your website performs over many different screen sizes/devices?

Hi guys,

I'm currently building a website using Bootstrap. The majority of my problems have come from making it responsive to all devices.

I know Bootstrap is by nature responsive, but after tweaking some CSS styles and adding my own media queries I've come across problems in different browsers.

I've managed to strip back on some on my own styles to get it looking good across chrome, firefox, safari and opera on desktop, tablet and mobile.

However, I'm a bit confused.

My laptop screen is a certain width right? Does that mean my site will look the same on another persons laptop who has a bigger screen size for e.g?

I've tested my site on an IPhone4 and an IPad Mini... but does that mean it will look the same on other IPhones/Smartphones and other tablet devices?

How do you even check?

And what is the secret to knowing it looks good on all devices.

Thanks Joe!

4 Answers

Hi Joe,

I use a google chrome extension called "window resizer". Lets you view a website in different sizes.

f12 chrome developer tools has a small mobile phone icon which lets you look at your pages on a range of devices too

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,040 Points

Hi Joe,

First of all if you want to check Responsiveness in the browser you can use a great web app called quirktools Screenfly www.quirktools.com/screenfly.

Unfortunately Bootstrap and other Frameworks aren't my strongest area but I do believe that with a responsive Framework like Bootstrap you can create a strong stable solution for Responsive websites that are god for all laptops, tablets, desktops and phones. :-)