Is there a way to adjust the body width based on screen resolution using JavaScript?
I attempted to set it with
document.body.style.width = screen.width;What I'm aiming for is to have a fixed screen width similar to websites like Stack Overflow, regardless of the device used.
Should JQuery be utilized for this purpose? Here is the HTML snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Fjalla+One|Gentium+Basic|Nunito|Hammersmith+One" rel="stylesheet">
<script src="https://use.fontawesome.com/ca51704d87.js"></script>
<script src="bg.js"></script>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="bload()">
<div id="header">
<img id="logo_head" src="src/logo_head.png" />
<p id="head">Kkv Martial Arts Academy</p>
<ul id="navhead">
<li id="subnav"><a id="link" href="index.html">HOME</a>
</li>
<li id="subnav">BRANCHES</li>
<li id="subnav"><a id="link" href="about_us.html">ABOUT US</a>
</li>
</ul>
<ul id="s2">
<li id="social"><a id="link" href="http://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.plus.google.com"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div id="picb">
<p id="greeting">KKV Martial Arts Academy.</p>
<p id="greeting2">One Place. Many Arts.</p>
<ul id=b>
<a id="link" href="karate.htm
l">
<button class="but1">KARATE</button>
</a>
<a id="link" href="slmb.html">
<button class="but2">SILAMBATAM</button>
</a>
<a id="link" href="kkv.html">
<button class="but3">KAALADI KUTHUVARISAI VARMA</button>
</a>
</ul>
...
...
Your input and suggestions are greatly appreciated.