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!

Register Log in
  • Congratulations Mike Lewis 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

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
 
Sort by date Sort by votes
I believe I need to add <meta name="viewport" content="width=device-width"> in the <head>.
Click to expand...

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.
 
Upvote 0 Downvote
@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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote

So the code you provided actually does nothing at all.
Click to expand...

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
 
Upvote 0 Downvote

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

Support Technician in an Educational Environmant
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Thanks guys, if I lose the absolute postioning, how do I center my DIV?
Click to expand...

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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
132
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
389
3esolar
3
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
72
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
98
pendle666
pendle666
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
110
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top