No replies
gidmeister
gidmeister's picture
Offline
Regular
NY
Last seen: 6 years 34 weeks ago
NY
Timezone: GMT-4
Joined: 2011-03-01
Posts: 47
Points: 93

I made a webpage which I want to work on mobile phones. So I made it simple - there is a header image (like a banner) on top, and then some content below it. I want the header image and the content to be centered, and they should take up most of the width of the screen.
My page is at:
http://www.zionism101.org/mobile/m_founders.aspx
If you look at it in a mobile-phone (I use an emulator - www.mobilephoneemulator.com) you see that the right side of the image gets chopped off.
To see just the relevant (in my opinion) code - here is an abbreviated listing:

<head>
 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 
</head>
<body>
    <form method="post" action="m_founders.aspx" id="form1">
    <center>
 
    <table style="width:330px" cellpadding="0" cellspacing="0" border="0"><tr><td style="text-align:center">
    <img src="/images/z101mobile.png" alt="mobile version" width="330px" height="67px" /></td></tr>
 
    <tr><td style="text-align:center">
 
 
 
<center>
 
<table class="mobiletable" cellpadding="5" cellspacing="5" align="center" >
<tr><td class="mobiletitle"><span class="mobilefont">Founding Fathers</span></td></tr>
<tr><td align="center"><a href="mFF_herzl.aspx"><img src="/images/pic_Herzl(Lrg).jpg" alt="herzl"/></a>
<span class="FooterText2"><a href="mFF_herzl.aspx">Theodor Herzl</a></span>

Any help is appreciated.
-- Gid