Sun, 2012-02-19 13:57
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
