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
Martynas Checkthis
1,080 PointsWorking with different screen resolutions
Hi all,
I have some issues with my one pager website. Hope you can help me. So basically I'm using a basic HP Laptop with a resolution of 1366 x 768px. I launched my site and it looks decent on my computer. However, when I test it on my friends 15' Macbook retina it doesn't respond respectively and, for example, header just stretches all the way to the right leaving the height a way smaller than it should be.. What technique I could use to make it respond to different screen resolutions? Or maybe there's a plugin for it? I made an image to illustrate my problem. http://postimg.org/image/599l83lsr/ Cheers.
3 Answers
Dan Jones
778 PointsHey,
If I understand your question correctly, you're feeling that your website is looking smaller with your friends resolution but displays okay on your own laptop?
There's honestly not a great deal you can do. If you have access to a high resolution monitor you can design for that then degrade gracefully down to lower resolutions through responsive design.
You could also use fluid design as height and width properies support a % attribute, however you may run into problems with this but it may be worth experimenting with.
Hope this helps in some way!
Liam Maclachlan
22,805 PointsHey guys,
this might help a bit. Great for mobile viewports as a lot of the smart phones have a 4x higher pixel density. Makes sure that your mobile sites are mobile and your desktop sites are viewing right.
<hmtl>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Let me know if this works or you can look in to media query tutorials on this site. They are brilliant :)
EDIT: It shouldn't matter too much about the device, it is more to do with the browser compatibility with your styling.
Are you also using normalize.css? It can really help with cross browser issues and make all default values the same. Put it above all of you other css and this may help resolve the issue with sneaky, sneaky padding and margin some browsers like to add.
Get it here: https://necolas.github.io/normalize.css/
EDIT2:
It could also be that your friends resolution is MUCH larger than yours meaning you may need to add a different layput style. Could you set up a code pen with your code? (http://codepen.io/)
Martynas Checkthis
1,080 PointsHey Dan and Liam, thanks for your replies.
Yep, I'm using both normalize.css and meta viewport tag and have no problem to make it look neat on mobile or tablet devices. The problem arrives on a bigger, wider screens.. This is the perfect example of what I'm trying to achieve: http://www.viewlike.us/operator/#u=http://melaniedaveid.com/|1366|768 It reacts perfectly to all resolutions, so it could be that it was made with a help of a technique that Dave have mentioned(gracefully downing to lower resolutions through responsive design)? Liam, it's kind of private project, but I could pass you the codes though my email which is martynas@bucinskas.lt
Liam Maclachlan
22,805 PointsYeah. That''ll be fine. Email me a link to a codepen (or just the code) to me at limey_88@hotmail.co.uk
Liam Maclachlan
22,805 PointsSilly question... have you added a max width to the site?
Martynas Checkthis
1,080 PointsYeah, but just to some sections(like paragraphs)individualy.
Liam Maclachlan
22,805 PointsIf you could send me the code, I'll have a look at it. I'm more of a visual learner anyway. Working all day tomorrow but I will see what I can do :)