We are developing a Full Screen website with some features. Now we are getting more isssue on resolutions.When ever the site open is deifferent resolutions, design gets disturbed with some empty spaces in between content. Just check out the below link to view our work.. We need to get these results: 1. To Avoid Horizontal scroll 2. Center Container with a balck border Bg should not get any white page appended to it left when resolution changed 3. is it possible to do a resposive layout that suits much higer resolutions. Note: We are not using any CSS framework & currenlty we user % method for all to attain a resposive layout (some how it got failed) Here attach link http://tinyurl.com/9482jcv
Wow it looks really good and something I'd actually use. 1. Avoid horizontal scroll You could code your widths in % rather than px as this would be % of the screen no matter what the resolution. You could also use a CSS framework like Foundation which makes you code in such a way that it's compatible with all devices and most screen resolutions. 2. I checked it in a couple of resolutions but didn't see the white space you were referring to 3. Ignore part 1 in section 1 about coding in % but framework-wise, Foundation is a really really good framework... See here for example on Foundation's website: http://foundation.zurb.com/docs/ minimize the screen and then drag it to make it smaller and watch what happens to the content. It shrinks everything with it making it compatible with almost everything. I have used it before and found it to work really well, the only issue I had was that it shrinks images instead of cropping them making the load on mobile devices not worth changing the way I coded.