How do I restrict the minimum resizable width of a browser?

Question

In the attached image, I'm comparing the minimum re-sizable width's of my website and GitHub's. How can I force my website to have a forced minimum width like GitHub?

I tried incorporating this code in the page's respective CSS file already:

body {
    min-width: 600px; 
    width: auto !important;
    width: 600px; 
}

Unfortunately, there's no difference and my browser can still resize smaller than the 600px limit.

EDIT: Still no luck with the current answers.

Answer 1

In chrome to devtools, then click on the following icon:

Then there you can click on responsive and you can resize the browser any size you want.

this code will restrict the user from resizing:

var size = [window.width,window.height];  //public variable

$(window).resize(function(){
    window.resizeTo(size[0],size[1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It doesn't work in this snippet because the snippet is in an Iframe. But should work in your application this includes JQuery though.

Answer 2

The !important width style is making the following width style redundant, so it may as well not be there at all. Note: If the content is larger than the minimum width, the min-width property has no effect.