I need to fit the website width to the screen width and when I zoom out the browser, I don't want the website width to stretch on left and right. I am using the Javascript now to assign the website width the value of window.screen.width, but I faced problem with IE7 and IE8 that when I zoom out or zoom in the window, then the value of window.screen.width will change.

I am looking to make something like this website: http://ca.com please try to zoom out and see the website will not stretch on left and right.

Would appreciate your kind hints.

Note: I don't want to use the Jquery or any library, just pure Javascript or CSS.



4 Years
Discussion Span
Last Post by webmeat

I'm not 100% sure I understand your question, but I believe you're saying you want a static width on various view sizes. You could just set the width inside a media query. For example:

@media only screen and (min-width: 320px) {
    .container {
        width: 300px;

@media only screen and (min-width: 480px) {
    .container {
        width: 460px;

Since I don't have your code, this is a generic example.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.