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

Joe Consterdine
Joe Consterdine
13,965 Points
Posted by 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

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

Hi Joe,

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

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

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,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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. :-)