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!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scale Down Website for Small Screens

Status
Not open for further replies.

kurio71

Technical User
Oct 1, 2009
172
MX
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
 
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.



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.
 
@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
 
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.
 

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
 

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

Support Technician in an Educational Environmant
 
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.
 
Just to add;

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

(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.
 
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
 
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top