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

Posted by kask
kask
7,509 Points

trouble responsive css help

I been making a website and it's started out alright i didn't notice no difference then but now i have i have my laptop connected to my T.V and when i put the window of my website on the T.V everything within my website is not how i want it it is all dis-organized and all out of order messed up.. Do i have to replace it with "em" "%" and use @media (max-width: #px)? or what?

5 Answers

David Endersby
David Endersby
24,915 Points
David Endersby
David Endersby
24,915 Points

I start with the bootstrap breakpoints which are 768px, 992px and 1200px. But I also use a chrome plugin called window resizer which has a host of standard browser widths for different devices.

I think the general rule is to resize your browser with your mouse and see where things break (hence breakpoints) and at that point create a media query that fixes it. You can have as many of as few as you like. Its personal preference. Using percentages will help to reduce the number of breakpoints.

Bare in mind that your end user won't be resizing the browser window and that theres not enough time in the world to make your site look amazing on Every device. Make it look great on the standard sizes like iphone, ipad, mac etc.

Post release you could use analytics to pin point your audience and their browser spec and taylor it to that.

kask
kask
7,509 Points

Alright i will do that thank you for helping me :)

patrik matheson
patrik matheson
1,879 Points
patrik matheson
patrik matheson
1,879 Points

This is pretty vague, but Im pretty sure your tv resolution is larger than your laptop and you may not have accounted for the screen size to change from the begging. Are you using a responsive framework? This may be a good place to start if your new to responsive development. http://getbootstrap.com

kask
kask
7,509 Points

Oh sorry, I am using bootstrap as the framework

patrik matheson
patrik matheson
1,879 Points
patrik matheson
patrik matheson
1,879 Points

Do you have a link to the page you can share?

patrik matheson
patrik matheson
1,879 Points
patrik matheson
patrik matheson
1,879 Points

Do you have a link to the page you can share?

kask
kask
7,509 Points

http://plurify.co/beta/ i also try'ed this on my other monitor (dell)

David Endersby
David Endersby
24,915 Points
David Endersby
David Endersby
24,915 Points

OK. So you've got bootstrap all loaded in and your using a fluid container but your elements (divs) aren't using the bootstrap grid syntax. i.e
<div class="col-md-10">

Once you start putting these in you'll see your elements snapping to the grid and then acting responsively. Check out http://getbootstrap.com/css/#grid for more info.

You then have to use media queries to modify your elements so they fit (and look nice) across a range of browser widths. In development I just tend to resize my desktop browser to get an idea of how it behaves. After that you can test across devices.

Hope this helps

kask
kask
7,509 Points

So then when i add the queries i would resize a browser to fit that resolution then i will put the code into that and make edits to make it fit that resolution?