Scale Down Website for Small Screens

kurio71 · Mar 18, 2017

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="

http://web2.nbscmanlys-h.schools.nsw.edu.au/moodle/login/index.php"

target="_blank"><img src="moodle.png" class="moodle" alt="Moodle icon"/>Moodle</a>
</td>
<td>
<a class="o" href="

https://saml-in2.clickview.com.au/Shibboleth.sso/detnsw"

target="_blank"><img src="play.png" />Clickview</a>
</td>
<td>
<a class="r" href="

http://www.dec.nsw.gov.au/"

target="_blank"><img src="portal.png" class="portal" />DoE Portal</a>
</td>
<td>
<a class="y" href="

https://www.lynda.com/signin"

target="_blank"><img src="lynda.png" />Lynda.com</a>
</td>
<td>
<a class="b" href="

http://www.manlyselectivecampuscareers.com/"

target="_blank"><img src="intranet.png" />Careers</a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="w" href="

http://web3.nbscmanlys-h.schools.nsw.edu.au/dashboard"

target="_blank"><img src="merits.png" />Merit System</a>
</td>
<td>
<a class="y" href="

https://www.google.com.au/"

target="_blank"><img src="google.png" />Google</a>
</td>
<td>
<a class="g" href="

http://turnitin.com/"

target="_blank"><img src="turnitin.png" />Turn It In</a>
</td>
<td>
<a class="w" href="

https://northernbeachessc.myediary.com.au/users/sign_in"

target="_blank"><img src="diary.png" />My eDiary</a>
</td>
<td>
<a class="b1" href="

http://web1.nbscmanlys-h.schools.nsw.edu.au/dashboard"

target="_blank"><img src="sentral.png" />Sentral</a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="g" href="

https://oliver333.library.det.nsw.edu.au/oliver/libraryHome.do?sso=false&corporation=8567"

target="_blank"><img src="library.png" />Library</a>
</td>
<td>
<a class="r" href="

http://www.worldbookonline.com/wb/Login?ed=wb&subacct=AU16128"

target="_blank" ><img src="world.png"class="World"/>World Book</a>
</td>
<td>
<a class="b1" href="

http://msc.edmodo.com"

target="_blank"><img src="edmodo.png" />Edmodo</a>
</td>
<td>
<a class="r" href="

http://www.nbscmanlys-h.schools.nsw.edu.au/"

target="_blank"><img src="intranet.png" />Website</a>
</td>
<td>
<a class="o" href="Technology.html" target="_blank"><img src="ICT.png" />Technology</a>
</td>
</tr>
</table>
</div>
</body>
</html>

Support Technician in an Educational Environmant

ChrisHirst · Mar 18, 2017

I believe I need to add <meta name="viewport" content="width=device-width"> in the <head>.

You do need somewhat more than just the "viewport" meta directive.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://css-tricks.com/css-media-queries/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

kurio71 · Mar 18, 2017

@media only screen and (max-width: 768px) {
div {
width: 100%;
}
}

If I add something like the above to the CSS, am I on the right path?

Support Technician in an Educational Environmant

ChrisHirst · Mar 19, 2017

Yes you do, as 'width: 100%;' simply 'means' that an element should fill the parent element's width. It determines nothing about the actual size of the element. Also a <div> is a block level element so is 100% width by default.

So the code you provided actually does nothing at all.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

vacunita · Mar 19, 2017

So the code you provided actually does nothing at all.

It does do something if the original CSS has a predefined width in pixels as is the case in the code above where the div has a width of 1112px. . Adding 100% in the media query supersedes the defined width, and makes the div adjust to the screen size, instead of being 1112px wide.

With that said however, since the div is actually absolutely positioned, and moves 50% of the way to the right, it will still not occupy 100% of the screen width.

Lose the absolute positioning, as it does not help really in this context, and your div, should then fill the screen.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

kurio71 · Mar 20, 2017

Thanks guys, if I lose the absolute postioning, how do I center my DIV?

Support Technician in an Educational Environmant

ChrisHirst · Mar 20, 2017

Give it a width less than 100% and set side margins to auto.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

ChrisHirst · Mar 20, 2017

Just to add;

positioning is not really about X, Y alignment, it is more about Z alignment (stacking in the vertical plane)

http://webmaster-talk.eu/articles/8-website-development-and-design/13-css-positioning

(self promo link drop)

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

vacunita · Mar 20, 2017

Thanks guys, if I lose the absolute postioning, how do I center my DIV?

You don't need to. If your div's width is 100% of the width of the screen, then there is nothing to center. It's taking up 100% of the width.

You only need to center, if the div does not occupy 100% of the width since then there would be space left over.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

audiopro · Mar 26, 2017

I prefer to use a few different versions.
The full blown version for desktop/laptop widths and a simplified version for mobiles and tablets.
I have found that trying to make a one size fits all version results in nothing satisfactory on any of them.

Keith

http://www.studiosoft.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Scale Down Website for Small Screens

kurio71

Technical User

ChrisHirst

IS-IT--Management

kurio71

Technical User

ChrisHirst

IS-IT--Management

vacunita

Programmer

kurio71

Technical User

ChrisHirst

IS-IT--Management

ChrisHirst

IS-IT--Management

vacunita

Programmer

audiopro

Programmer

Similar threads

Part and Inventory Search

Sponsor