Site not displaying properly on ipad and iphone. header and footer in place, body/container not?

Just put these inside another div and make it 1020px wide, secure the position and max/min widths.

Up vote 0 down vote favorite share g+ share fb share tw.

My site is http://farmersforum. In which is not displaying properly on ipad and iphone. The header and footer and left aligned but the body is right aligned and starts from where the header ends.

The #container width is 1020px so I don't think that is the problem. Here's the css code; /* Theme Name: gazpoMag Theme URI: gazpo.com Description: gazpoMag is a clean and featured-rich Wordpress magazine style theme. It allows you to easily customize every detail of the theme to best suit your needs.

Author: Sami Ch. Author URI: http://www. Gazpo.com License: GNU General Public License License URI: license.

Txt */ * { padding:0; margin:0; } body{ color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 20px; font-size: 12px; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } a, a:visited{ text-decoration: none; color: #004A8D; } a:hover{ text-decoration: underline; color: #004A8D; } a { outline: none; } h2, h3, h4{ font-family: 'Helvetica', Arial; color: #222; text-shadow: 0px 0px 1px #ccc; } h2{ font-size:16px; margin:10px 0 3px; } h3{ font-size: 16px; } h4{ font-size: 16px; } h2 a, h2 a:visited{ color:#004A8D; font-size:16px; } h2 a:hover{ text-decoration: none; color:#133451; } a img { border: none; } img. Centered { display: block; margin-left: auto; margin-right: auto; } img. Alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.

Alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } . Alignright { float: right; } . Alignleft { float: left; } #container{ margin: 0 auto; width: 1020px; text-align: left; overflow:auto; background:#ffffff; } #header { background: url("images/bg.

Png") repeat-x; } #header . Wrap{ background: url("images/bg. Png") repeat-x; width: 1020px; height: 120px; margin:0 auto; } #header .

Logo{ margin-top:7px; width: 420px; float:left; overflow:hidden; display:table; } #header . Logo img{ max-width: 415px; max-height:110px; } #header . Logo .

Text{ display:table-cell; vertical-align:middle; } #header . Logo h1 a{ font-family: 'Droid Serif', Arial; font-size:44px; line-height:0.9; color:rgba(241,244,245,.7) ; font-weight: bold; text-shadow:1px 1px rgba(202,216,221,.7), 2px 2px rgba(202,216,221,.7), 3px 3px rgba(202,216,221,.7); } #header . Logo h1 a:hover{ text-decoration:none; } #header .

Right{ margin-top:10px; width: 546px; float:left; margin-left: 50px; } #header . Links { margin-bottom:10px; overflow:auto; } #header . Links ul{ overflow:auto; color:white; float:right; } #header .

Links ul li{ float: left; margin-left:8px; } #header . Links ul li a { color: #DAE5EC; padding-right:8px; font-size:13px; font-weight:bold; } #header . Twitter{ background: url("") no-repeat; padding-left:55px; font-family:'Droid Serif', serif; font-size:14px; min-height:40px; max-height:60px; overflow:hidden; } #header #twitter_update_list{ color:#cccccc; } #header #twitter_update_list a{ color: #DAE5EC; } #subheader{ background: url("images/subheader.

Png") repeat-x; } #subheader . Wrap{ width: 1020px; margin:0 auto; background: url("images/subheader. Png") repeat-x; height:40px; text-transform:uppercase; font-weight:bold; color: #7B7B7B; line-height:40px; } #subheader ul li{ float: left; margin-right:25px; } #subheader .

Categories{ width:780px; float:left; } #subheader . Search{ width:236px; float:left; } #subheader . Search input { font: normal 14px/100% Arial, Helvetica, sans-serif; } #subheader .

Search . Searchfield { background: #fff; padding: 7px 6px 7px 8px; width: 220px; border: solid 1px #bcbbbb; outline: none; margin-top:4px; border-radius: 15px; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } #content{ float: left; width: 716px; overflow: auto; } #featured-cat{ overflow: auto; margin: 10px 10px 5px; border-bottom:1px solid #D4D4D4; } #featured-cat . Cat-title{ background:#f6f6f6; border-bottom:1px solid #dbdbdb; padding:5px; margin-bottom:5px; } #featured-cat .

Box{ width:220px; float:left; overflow:hidden; } #featured-cat . Margin-right{ margin-right:15px; } #featured-cat . Thumb{ position:relative; float:left; width:220px; height:130px; overflow:hidden; } #featured-cat .

Date{ position:absolute; background: #000000; color: #FFFFFF; display: block; font-size: 12px; font-weight: 700; opacity: 0.7; padding: 2px 5px 4px 5px; top: 20px; } #featured-cat . Details{ margin-bottom:10px; clear:both; padding-top: 8px; } #content . Post{ overflow: auto; margin: 10px 10px 5px 0px; } #content .

S_socialbar{ margin-top:30px; margin-left: -80px; display: block; position: absolute; background:#ECF5FA; border-radius:7px; } #content . S_socialbar ul{ margin:10px 5px 0px 5px; } #content . S_socialbar ul li{ margin-bottom:10px; } #content .

S_socialbar . Fb-like{ margin:0px 0px 4px 4px; } #content . Post .

Postmeta { overflow:auto; padding:2px; font-size:12px; color: #777777; } #content . Post . Postmeta .

Comments{ float:right; margin-right: 10px; background:url(images/comments. Png) no-repeat left center; padding-left:20px; } #content . Wp-post-image{ background-color: #F3F3F3; border: 1px solid #DDDDDD; border-radius: 3px 3px 3px 3px; } #content .

Entry img{ max-width: 97.5%; height:auto; border:1px solid #ddd; padding:2px background-color:#f3f3f3; margin:5px 10px 5px 0; } #content . Thumb-twitter-entry{ overflow:auto; width: 420px; float:left; } #content . Thumb-entry{ float:left; width: 489px; } #content .

Twitter-entry{ float:left; width: 635px; } #content . Entry{ overflow:auto; margin-bottom:20px; } #content . Post-twitter{ width: 60px; float:left; margin:15px 0px 0px 5px; } #content .

Wp-caption{ border:1px solid #ddd; text-align:center; background-color:#f3f3f3; padding-top:4px; margin:10px 5px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } #content . Wp-caption img{ margin:0; padding:0; border:0 none; } #content . Wp-caption p.

Wp-caption-text{ font-size:11px; line-height:17px; padding:0 4px 5px; margin:0; } #content . Entry blockquote{ background: url("images/quote. Png") no-repeat; font-family: "Georgia", Arial, Helvetica, sans-serif; color: #777777; margin: 5px 5px 10px 25px; padding-left: 32px; padding-top: 3px; font-style:italic; } #content .

Entry ul{ list-style-type:square; margin: 5px 10px 10px 40px; } #content . Entry ol{ list-style-type:decimal; margin: 5px 10px 10px 40px; } #sidebar{ float: left; width: 300px; padding-top:10px; } #sidebar h4{ padding: 4px 0px 4px 24px; border-bottom:1px solid #dbdbdb; } #sidebar . Box{ margin-bottom:10px; border-bottom: 1px solid #EFEFEF; padding:5px; } #sidebar_social{ overflow:auto; margin:10px 0; } #sidebar_social a{ font-size: 12px; font-weight: bold; padding: 50px 5px 0px; } #sidebar_social ul{ overflow:auto; } #sidebar_social ul li{ width:70px; float:left; padding-top:50px; text-align: center; overflow:auto; } #sidebar .

Widget_categories{ margin-bottom: 10px; } #sidebar . Widget_categories h4{ background:#f6f6f6 url('images/tag. Png') no-repeat 5px center; } #sidebar .

Widget_categories ul, #footer . Widget_categories ul{ overflow:auto; padding:10px 5px; margin: 5px; } #sidebar . Widget_categories ul li, #footer .

Widget_categories ul li{ margin-right:8px; float: left; font-size: 12px; margin-bottom: 10px; } #sidebar . Widget_categories ul li a, #footer . Widget_categories ul li a{ background-color: #f6f6f6; border-bottom: 1px solid #DBDBDB; border-right: 1px solid #DBDBDB; color: #777777; padding: 3px 6px; text-decoration: none; white-space: nowrap; } #sidebar .

Widget_categories ul li a:hover,#footer . Widget_categories ul li a:hover{ text-decoration: none; background: #E8E8E8; } #sidebar . Widget_archive h4{ background:#f6f6f6 url('images/calendar.

Png') no-repeat 5px center; } #sidebar . Widget_archive ul, #sidebar . Widget_links ul{ padding:5px; } #sidebar .

Widget_archive ul li, #sidebar . Widget_links ul li{ padding:3px 0px 3px 12px; background:url(images/cat_bullet. Png) no-repeat left center; } #sidebar .

Widget_links h4{ background:#f6f6f6 url('images/bookmarks. Png') no-repeat 5px center; } #sidebar . Widget_subscribers{ margin-bottom:10px; } #sidebar .

Widget_subscribers . Counts{ margin:15px; overflow:auto; } #sidebar . Widget_subscribers .

Counts img{ vertical-align:middle; } #sidebar . Widget_subscribers . Fb{ float:left; margin-right: 20px; margin-left:25px; } #sidebar .

Widget_subscribers . Twitter{ float:left; } #sidebar . Widget_subscribers .

Count{ display: inline-block; font-size: 22px; font-weight: bold; vertical-align: middle; } #sidebar . Widget_subscribers . Count a{ color: #404040!

Important; } #sidebar . Widget_subscribers . Count a:hover{ text-decoration:none; } #sidebar .

Widget_posts{ margin-bottom:10px; } #sidebar . Widget_posts ul. Tabs { height: 30px; line-height: 24px; list-style: none; background: #FFF; background:url(images/sidebar_posts.

Png) no-repeat top center; font-size: 14px; font-weight: bold; font-family: 'Droid Serif', Arial; border-bottom: 1px solid #D4D4D4; } #sidebar . Widget_posts . Tabs li { float: left; padding-top:3px; color: #777; cursor: pointer; padding-left: 24px; } #sidebar .

Widget_posts . Tabs li:hover { color: #333333; text-shadow: 0px 0px 1px #ccc; } #sidebar . Widget_posts .

Tabs li. Current { color: #333333; text-shadow: 0px 0px 1px #ccc; } #sidebar . Widget_posts .

Post_box. Visible { display: block; } #sidebar . Widget_posts .

Tabs li. Recent{ background:#f6f6f6 url('images/calendar1. Png') no-repeat 5px center; margin-right:5px; width:65px; } #sidebar .

Widget_posts . Tabs li. Popular{ background:#f6f6f6 url('images/heart.

Png') no-repeat 5px center; margin-right:5px; width:70px; } #sidebar . Widget_posts . Tabs li.

Comments{ background:#f6f6f6 url('images/comments. Png') no-repeat 5px center; width:80px; } #sidebar . Widget_posts .

Posts-list li{ margin-bottom:5px; font-size: 12px; overflow:auto; padding-bottom:5px; } #sidebar . Widget_posts . Post_box { display: none; border-width: 0 1px 1px; padding: 5px; height:255px; } #sidebar .

Widget_posts . Info{ float:left; width:210px; } #sidebar . Widget_posts .

Meta { font-style:italic; } #sidebar . Widget_posts . Meta .

Date{ float:left; } #sidebar . Widget_posts . Meta .

Cmts{ float:right; margin-right: 10px; background:url(images/comment. Png) no-repeat left center; padding-left:20px; font-style:normal; } #sidebar . Widget_posts .

Posts-list li . Title{ font-weight:bold; } #sidebar . Widget_posts .

Thumb{ width: 60px; height: 40px; float:left; margin-right:5px; } #sidebar . Widget_posts . Avatar-42{ width: 42px; height: 42px; float:left; margin-right:5px; } #sidebar .

Widget_posts . Comment-info{ float:left; width:230px; } #sidebar . Widget_posts .

Comment-info p{ line-height:15px; } #sidebar . Widget_facebook h4{ background:#f6f6f6 url('images/facebook. Png') no-repeat 5px center; } #sidebar .

Widget_facebook{ margin-bottom:10px; } #sidebar . Widget_text h4{ background:#f6f6f6 url('images/about. Png') no-repeat 5px center; margin-bottom:5px; } #sidebar .

Widget_text { margin-bottom:10px; } #footer . Widget_text h4{ background:url('images/about. Png') no-repeat 12px center; margin-bottom:5px; } #sidebar .

Widget_ad125{ margin-bottom:10px; overflow:auto; } #sidebar . Widget_ad125 h4{ background:#f6f6f6 url('images/star. Png') no-repeat 5px center; margin-bottom:5px; } #sidebar .

Widget_ad125 li{ float:left; margin:10px 10px; } #sidebar . Widget_ad125 li img{ width:125px; height:125px; } #footer { background: url("images/bg. Png") repeat; } #footer .

Wrap{ width: 1020px; margin:0 auto; padding:10px; overflow:auto; color: #CCCCCC; } #footer . Main{ overflow:auto; padding-bottom:5px; } #footer . Box{ float: left; width:330px; } #footer .

Info{ font-size:12px; } #footer h4{ padding-left:32px; margin-bottom:5px; color: #CCCCCC; text-shadow:none; } #footer a{ color: #DAE5EC; } #footer . Widget_text{ margin-bottom:10px; padding: 0 20px; } #footer . Widget_links ul, #footer .

Widget_archive ul, #footer . Widget_categories ul{ padding:0px 15px; } #footer . Widget_links h4{ background:url('images/bookmarks.

Png') no-repeat 12px center; } #footer . Widget_archive h4{ background:url('images/calendar. Png') no-repeat 12px center; } #footer .

Widget_categories h4{ background:url('images/tag. Png') no-repeat 12px center; } #footer . Widget_links, #footer .

Widget_archive, #footer . Widget_categories, #footer . Widget_text{ float: left; width:298px; margin-right:10px; } #footer .

Widget_links ul li, #footer . Widget_archive ul li{ padding: 2px 0 2px 20px; background:url(images/u. Png) no-repeat left center; } #footer .

Widget_tweets{ width:298px; float:left; margin-right:30px; } #footer . Widget_tweets h4. Title{ background:url('images/twitter.

Png') no-repeat 12px center; } #footer . Widget_social{ width:298px; float: left; margin-right:10px; } #footer . Widget_social h4{ background:url('images/interact.

Png') no-repeat 12px center; } #sidebar . Widget_social h4{ background:#f6f6f6 url('images/interact. Png') no-repeat 5px center; } #sidebar .

Widget_social ul{ padding:10px 5px; } #footer . Widget_social ul{ padding:0px 15px; } #footer . Widget_social ul li{ padding: 2px 0 2px 20px; } #sidebar .

Widget_social ul li{ padding:4px 0px 4px 20px; } . Widget_social ul li. Facebook{ background:url(images/facebook.

Png) no-repeat left center; } . Widget_social ul li. Twitter{ background:url(images/twitter.

Png) no-repeat left center; } . Widget_social ul li. Gplus{ background:url(images/gplus.

Png) no-repeat left center; } . Widget_social ul li. Rss{ background:url(images/rss.

Png) no-repeat left center; } . Widget_social ul li. Contact{ background:url(images/email.

Png) no-repeat left center; } #gazpo-socialbar { background: #E3EDF4; border-color: #E3EDF4; display: block; margin-left: -65px; position: fixed; top: 200px; width: 65px; } #respond . Cancel-comment-reply{ float:right; } #comments h3, #content . Comments h4 { margin:10px 0px; } #comments ol.

Commentlist { margin: 10px 0 20px 0; list-style-type: none; overflow: visible; } #comments li. Comment { margin-bottom: 10px; } #comments li. Comment .

Comment-body { margin-left: 65px; position: relative; min-height:60px; } #comments li. Comment . Comment-meta { overflow: hidden; float: left; display: block; width: 50%; } #comments li.

Comment . Avatar { position: absolute; left: -65px; padding: 3px; border:1px solid #ddd; background-color:#f3f3f3; } #comments . Comment-awaiting-moderation{ color: red; font-size:12px; font-style:italic; } #comments li.

Comment p { clear: both; } #comments li. Comment cite, li. Bypostauthor li.

Comment cite { font-weight: bold; font-style: normal; padding-right:10px; margin-right: 8px; float: left; } #comments . Commentmetadata, . Commentmetadata a { font-size: 12px; color: #999; } #comments .

Commentmetadata a:hover { color: #666; text-decoration: none; } #comments . Says { display: none; } #comments . Comment-meta { margin: 0 0 10px; line-height: 18px; position: relative; } #comments li.

Comment . Comment-body a. Comment-reply-link { display: block; position: absolute; right: 0; top: 0px; padding-right: 10px; font-size: 12px; } #comments .

Children { list-style-type: none; margin: 10px 0 0px 30px; } #comments . Children li. Comment .

Comment-body { margin-left: 70px; position: relative; min-height:60px; } #comments . Children li. Comment .

Avatar { position: absolute; left: -65px; } #respond { margin-top:15px; } #commentform { background: #f6f6f6; border-radius: 3px; padding: 15px 10px; overflow:auto; margin:20px 0px; } #commentform . Fields-container{ overflow:auto; margin-bottom:15px; } #commentform . Info{ float: left; margin-right: 15px; width: 250px; } #commentform .

Info span{ font-style:italic; } #commentform label{ clear: both; color: #667780; display: block; line-height: 24px; } #commentform input{ width: 240px; border: 1px solid #CAD9E0; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size:14px; margin-bottom: 6px; padding: 8px 3px; } #commentform textarea { height: 150px; width:98%; border: 1px solid #CAD9E0; border-radius: 3px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 2px; padding: 6px 3px; } #commentform . Message{ float: left; width: 410px; } #commentform . Gazpo-button{ width: 80px; padding: 6px 8px; } .

Gazpo-button{ border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; display: inline-block; font: 14px/100% Arial,Helvetica,sans-serif; margin: 0 2px; outline: medium none; padding: 5px 10px; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); vertical-align: baseline; background: -moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent; border: 1px solid #B7B7B7; color: #606060; } . Gazpo-button:hover { background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft. Gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); } .

Gazpo-button:active { color: #999; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); background: -moz-linear-gradient(top, #ededed, #fff); filter: progid:DXImageTransform.Microsoft. Gradient(startColorstr='#ededed', endColorstr='#ffffff'); } . Pagination { clear:both; margin: 10px; text-align:center; font-family:Verdana,Tahoma,Arial; font-size: 13px; padding:4px 6px 4px 0; background-color:#fff; color:#313031; } .

Pagination span{ padding: 3px; margin: 3px; text-align:center; } . Pagination a { padding: 2px 5px 2px 5px; margin-right: 4px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } . Pagination a:hover, .

Pagination a:active{ border: 1px solid #2b66a5; color: #000; } . Pagination . Current{ padding: 2px 5px 2px 5px; margin-right: 4px; border: 1px solid navy; font-weight: bold; background-color: #2e6ab1; color: #FFF; } css ipad wordpress link|improve this question asked Dec 21 '11 at 18:54user11104461.

Just put these inside another div and make it 1020px wide, secure the position and max/min widths. Or re-make theme using responsive design with grid and nice columns.

Im using a theme for this. I'm really a novice at css and wordpress coding. Can you please explain better?

Where do I put the code you've mentioned? In css, I presume. Anywhere within the css?

Also how do I secure the position and max/min widths. – user1110446 Dec 30 '11 at 6:40.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.