Skip to content
Advertisement

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

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

NOTE

I have done this with iframe but iframe will not work because some of things will not work like routing url will not show in url bar

Advertisement

Answer

There is no way to show responsive page content with JavaScript and jQuery within 600px.

One thing you can implement iframe iframe. It will show responsive content but you said iframe will not work for that, it will give some other issues like routing and search engine optimizing.

So you need to change all Bootstrap class manually there is no other way. If you are using Bootstrap then change class to col-12 as per your requirement.

Also you can use @media rule for more responsive.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement