INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Scale Down Website for Small Screens

Scale Down Website for Small Screens

(OP)
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..." 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="https://saml-in2.clickview.com.au/Shibboleth.sso/d..." target="_blank"><p><img src="play.png" /></p><span class="text">Clickview</span></a>
</td>
<td>
<a class="r" href="http://www.dec.nsw.gov.au/" target="_blank"><p><img src="portal.png" class="portal" /></p><span class="text">DoE Portal</span></a>
</td>
<td>
<a class="y" href="https://www.lynda.com/signin" target="_blank"><p><img src="lynda.png" /></p><span class="text">Lynda.com</span></a>
</td>
<td>
<a class="b" href="http://www.manlyselectivecampuscareers.com/" target="_blank"><p><img src="intranet.png" /></p><span class="text">Careers</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="w" href="http://web3.nbscmanlys-h.schools.nsw.edu.au/dashbo..." target="_blank"><p><img src="merits.png" /></p><span class="text">Merit System</span></a>
</td>
<td>
<a class="y" href="https://www.google.com.au/" target="_blank"><p><img src="google.png" /></p><span class="text">Google</span></a>
</td>
<td>
<a class="g" href="http://turnitin.com/" target="_blank"><p><img src="turnitin.png" /></p><span class="text">Turn It In</span></a>
</td>
<td>
<a class="w" href="https://northernbeachessc.myediary.com.au/users/si..." target="_blank"><p><img src="diary.png" /></p><span class="text">My eDiary</span></a>
</td>
<td>
<a class="b1" href="http://web1.nbscmanlys-h.schools.nsw.edu.au/dashbo..." target="_blank"><p><img src="sentral.png" /></p><span class="text">Sentral</span></a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="g" href="https://oliver333.library.det.nsw.edu.au/oliver/li..." target="_blank"><p><img src="library.png" /></p><span class="text">Library</span></a>
</td>
<td>
<a class="r" href="http://www.worldbookonline.com/wb/Login?ed=wb&..." target="_blank" ><p><img src="world.png"class="World"/></p><span class="text">World Book</span></a>
</td>
<td>
<a class="b1" href="http://msc.edmodo.com" target="_blank"><p><img src="edmodo.png" /></p><span class="text">Edmodo</span></a>
</td>
<td>
<a class="r" href="http://www.nbscmanlys-h.schools.nsw.edu.au/" 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

RE: Scale Down Website for Small Screens

Quote:

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

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.

RE: Scale Down Website for Small Screens

(OP)
@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

RE: Scale Down Website for Small Screens

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.

RE: Scale Down Website for Small Screens


Quote:

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

RE: Scale Down Website for Small Screens

(OP)

Quote (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.)


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

Support Technician in an Educational Environmant

RE: Scale Down Website for Small Screens

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.

RE: Scale Down Website for Small Screens

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-develo... (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.

RE: Scale Down Website for Small Screens

Quote:


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

RE: Scale Down Website for Small Screens

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
www.studiosoft.co.uk

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close