How to set html body max width 650px with responsive content with javascript or jquery-CodePudding

Hello I am working on one website that website basically for all like desktop, iPad and phone and this website is fully responsive and I have used bootstrap and some other @media rule so currently when I resize the window then automatically adjust this website so now my expectation is that.

Expectation :

I have a html body and I want to set body max-width to 650px with responsive content so how I can achieve this like with some javascript and jquery and if you post answer then it will good for me to understand the code.

My code

HTML

<body class="customcss">
  <app-root></app-root>
</body>

CSS

.customcss{
  max-width: '650px'; // this is set 650px to body page
  margin: 0 auto; // body content display on center of the screen
}

you can check this for demo purpose I want to make same with this

CodePudding user response：

body { max-width: 650px; }

or use rem instead of px to make it more "responsive" no need to use JS

CodePudding user response：

document.body.style.maxWidth = "650px"