I have a webpage (www.msc.nsw.edu.au) with a DIV of 1112px x 648px that I want to display on small screens with a bigger view point (without the scroll bars). I believe I need to add <meta name="viewport" content="width=device-width"> in the <head>. I tested this and it did not work. What else can I try?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MSC Internet Portal</title>
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="msapplication-TileColor" content="#da532C"/>
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="theme-color" content="#ffffff">
<style type="text/css">
body{
width:99%;
font-family: Arial, Helvetica, sans-serif;
background-color: #333;
}
div {position: absolute;
height: 648px;
width: 1112px;
top: 50%;
left: 50%;
margin-top: -324px;
margin-left: -556px;
}
table {text-align: center;}
a {
display: inline-block;
width: 210px;
height: 190px;
text-decoration: none;
text-align: center;
font-size:24px;
color: #333;
margin: 2px;
padding-bottom: 12px;
}
p {margin-top: 10%;
margin-bottom:10%;
text-align: center;
}
img {height:60%;
width:60%;
border:none;
margin-bottom: -20px;
}
td { padding: 3px;}
.r { background-color:#da5050; }
.r:hover { box-shadow: 0 0 1em #da5050; }
.w { background-color:#FFF; }
.w:hover { box-shadow: 0 0 1em #FFF; }
.b { background-color:#9CDBFA; }
.b:hover { box-shadow: 0 0 1em #9CDBFA; }
.o { background-color:#F9A339; }
.o:hover { box-shadow: 0 0 1em #F9A339; }
.g { background-color:#2caf26; }
.g:hover{ box-shadow: 0 0 1em #2caf26; }
.y { background-color:#f7ec3b; }
.y:hover{ box-shadow: 0 0 1em #f7ec3b; }
.b1 { background-color:#256bd5; }
.b1:hover{ box-shadow: 0 0 1em #256bd5; }
a:hover
{
margin: 0px;
margin-bottom: 2px;
padding: 2px;
padding-bottom: 12px;
}
.moodle {
height:127px;
width:150px;
border:none;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>
<a class="b" href=" target="_blank"><p><img src="moodle.png" class="moodle" alt="Moodle icon"/></p><span class="text">Moodle</span></a>
</td>
<td>
<a class="o" href=" target="_blank"><p><img src="play.png" /></p><span class="text">Clickview</span></a>
</td>
<td>
<a class="r" href=" target="_blank"><p><img src="portal.png" class="portal" /></p><span class="text">DoE Portal</span></a>
</td>
<td>
<a class="y" href=" target="_blank"><p><img src="lynda.png" /></p><span class="text">Lynda.com</span></a>
</td>
<td>
<a class="b" href=" target="_blank"><p><img src="intranet.png" /></p><span class="text">Careers</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="w" href=" target="_blank"><p><img src="merits.png" /></p><span class="text">Merit System</span></a>
</td>
<td>
<a class="y" href=" target="_blank"><p><img src="google.png" /></p><span class="text">Google</span></a>
</td>
<td>
<a class="g" href=" target="_blank"><p><img src="turnitin.png" /></p><span class="text">Turn It In</span></a>
</td>
<td>
<a class="w" href=" target="_blank"><p><img src="diary.png" /></p><span class="text">My eDiary</span></a>
</td>
<td>
<a class="b1" href=" target="_blank"><p><img src="sentral.png" /></p><span class="text">Sentral</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="g" href=" target="_blank"><p><img src="library.png" /></p><span class="text">Library</span></a>
</td>
<td>
<a class="r" href=" target="_blank" ><p><img src="world.png"class="World"/></p><span class="text">World Book</span></a>
</td>
<td>
<a class="b1" href=" target="_blank"><p><img src="edmodo.png" /></p><span class="text">Edmodo</span></a>
</td>
<td>
<a class="r" href=" target="_blank"><p><img src="intranet.png" /></p><span class="text">Website</span></a>
</td>
<td>
<a class="o" href="Technology.html" target="_blank"><p><img src="ICT.png" /></p><span class="text">Technology</span></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Support Technician in an Educational Environmant
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MSC Internet Portal</title>
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="msapplication-TileColor" content="#da532C"/>
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="theme-color" content="#ffffff">
<style type="text/css">
body{
width:99%;
font-family: Arial, Helvetica, sans-serif;
background-color: #333;
}
div {position: absolute;
height: 648px;
width: 1112px;
top: 50%;
left: 50%;
margin-top: -324px;
margin-left: -556px;
}
table {text-align: center;}
a {
display: inline-block;
width: 210px;
height: 190px;
text-decoration: none;
text-align: center;
font-size:24px;
color: #333;
margin: 2px;
padding-bottom: 12px;
}
p {margin-top: 10%;
margin-bottom:10%;
text-align: center;
}
img {height:60%;
width:60%;
border:none;
margin-bottom: -20px;
}
td { padding: 3px;}
.r { background-color:#da5050; }
.r:hover { box-shadow: 0 0 1em #da5050; }
.w { background-color:#FFF; }
.w:hover { box-shadow: 0 0 1em #FFF; }
.b { background-color:#9CDBFA; }
.b:hover { box-shadow: 0 0 1em #9CDBFA; }
.o { background-color:#F9A339; }
.o:hover { box-shadow: 0 0 1em #F9A339; }
.g { background-color:#2caf26; }
.g:hover{ box-shadow: 0 0 1em #2caf26; }
.y { background-color:#f7ec3b; }
.y:hover{ box-shadow: 0 0 1em #f7ec3b; }
.b1 { background-color:#256bd5; }
.b1:hover{ box-shadow: 0 0 1em #256bd5; }
a:hover
{
margin: 0px;
margin-bottom: 2px;
padding: 2px;
padding-bottom: 12px;
}
.moodle {
height:127px;
width:150px;
border:none;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>
<a class="b" href=" target="_blank"><p><img src="moodle.png" class="moodle" alt="Moodle icon"/></p><span class="text">Moodle</span></a>
</td>
<td>
<a class="o" href=" target="_blank"><p><img src="play.png" /></p><span class="text">Clickview</span></a>
</td>
<td>
<a class="r" href=" target="_blank"><p><img src="portal.png" class="portal" /></p><span class="text">DoE Portal</span></a>
</td>
<td>
<a class="y" href=" target="_blank"><p><img src="lynda.png" /></p><span class="text">Lynda.com</span></a>
</td>
<td>
<a class="b" href=" target="_blank"><p><img src="intranet.png" /></p><span class="text">Careers</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="w" href=" target="_blank"><p><img src="merits.png" /></p><span class="text">Merit System</span></a>
</td>
<td>
<a class="y" href=" target="_blank"><p><img src="google.png" /></p><span class="text">Google</span></a>
</td>
<td>
<a class="g" href=" target="_blank"><p><img src="turnitin.png" /></p><span class="text">Turn It In</span></a>
</td>
<td>
<a class="w" href=" target="_blank"><p><img src="diary.png" /></p><span class="text">My eDiary</span></a>
</td>
<td>
<a class="b1" href=" target="_blank"><p><img src="sentral.png" /></p><span class="text">Sentral</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="g" href=" target="_blank"><p><img src="library.png" /></p><span class="text">Library</span></a>
</td>
<td>
<a class="r" href=" target="_blank" ><p><img src="world.png"class="World"/></p><span class="text">World Book</span></a>
</td>
<td>
<a class="b1" href=" target="_blank"><p><img src="edmodo.png" /></p><span class="text">Edmodo</span></a>
</td>
<td>
<a class="r" href=" target="_blank"><p><img src="intranet.png" /></p><span class="text">Website</span></a>
</td>
<td>
<a class="o" href="Technology.html" target="_blank"><p><img src="ICT.png" /></p><span class="text">Technology</span></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Support Technician in an Educational Environmant