Welcome to WebmasterWorld Guest from 54.162.48.54

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to make the page fit to any screen size

     
4:34 am on Apr 9, 2012 (gmt 0)

New User

joined:Apr 9, 2012
posts:1
votes: 0


well i work in my comp at 1920 x 1080... but when i open the page in other place thats 1024 x 768 or 1280 x 1024 it looks ugly and so big can i fix that?
im just started making that page, this part is just the "language select" i would like to fit to any screen, thanks

<html>
<head>
<title>Welcome !</title>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >
</head>
<body style="background-image:url(mcc.png);background-size:100%;background-repeat:no-repeat;">
</body
<h1><p align="left"size="20%"><a href="http://"><img src="Brazil.gif" border="0" ><img src="langbr.gif" border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="China.gif"border="0"><img src="langch.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="France.gif"border="0"><img src="langfrance.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="Germany.gif"border="0"><img src="langgermany.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="italy.gif"border="0"><img src="langitaly.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="http://"><img src="Spain.gif"border="0"><img src="langspain.gif"border="0"></a></h1>
<h1><p align="left"size="20%"><a href="usa.html"><img src="USA.gif"border="0"><img src="langusa.gif"border="0"> <a href="http://"><img src="trees.png" align="right"width="20%"border="0"> </a></h1>
</html>
7:02 am on Apr 9, 2012 (gmt 0)

Administrator from US 

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14648
votes: 94


One way to handle restricting page size is in your CSS for a div that wraps the content areas of the page to include the following: "width:95%;max-width:1000px;" obviously replacing "1000px" with whatever size you want your page to stop expanding.
10:35 am on Apr 9, 2012 (gmt 0)

Junior Member

joined:Mar 16, 2012
posts: 95
votes: 0


#1 "div that wraps the content"

also research "viewport"

"<meta name="viewport" content="device-width, initial-scale=1, user-scalable=1" />"

w3c has a mobile validation checker that will give feedback.

font-size (px, em, pt, %) will effect different resolutions. browsers etc.
10:40 am on Apr 9, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13064
votes: 307


... and while you're at it, throw out that HTML editor and invest in a better one. Or do it by hand.

<h1><p align="left"size="20%"><a href="usa.html"><img src="USA.gif"border="0"><img src="langusa.gif"border="0"> <a href="http://"><img src="trees.png" align="right"width="20%"border="0"> </a></h1>


Rumor has it that google throws fits if it finds even two <h1>s on a page, let alone seven in immediate succesion. The validator will also have something to say about ... oh, lots of stuff.

This isn't as off-topic as you might think. If you want your pages to display as intended on a wide range of browsers, it's important to have HTML and CSS that follows current standards. You don't want other people's browsers to start making things up because they're unable or unwilling to do what the page is asking them to do.