CSS Wordpress Blog on Iphone

Question

I am working on this wordpress blog http://www.taranmarlowjewelry.com/?page_id=7 (looks fine on a normal web broswer) I tried to edit the CSS so it looks good on an iphone...I added these lines in my iphone css file

.wrapper{
    position:relative;
    width:840px;
    margin:0 auto;
}

.blog #page{
    width:840px !important;
}

.blog #main{
    width:840px !important;
}

.blog #primary {
    width:220px !important;
}

.blog #content {
    width: 220px !important;
}

.blog #secondary {
    width:200px !important;
    float:right !important;
}

but there is a massive space between the blog and the sidebar and the width of this page is too wide, while my home, about page look good with the .wrapper at a width of 840px;

What is going wrong here?

Wow those are a lot of `!important` keywords! Try to use them sparingly... — TheZ, Jul 06 '12 at 20:29
It isn't a solution to your problem, just a comment on your style. — TheZ, Jul 06 '12 at 20:37

score 0 · Accepted Answer · answered Jul 06 '12 at 20:47

0

Have you tried using initial scale?

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Add that in and adjust your CSS accordingly.

answered Jul 06 '12 at 20:47

Sean Thompson

902
1
9
19

score 0 · Answer 2 · edited May 23 '17 at 11:56

The correct way is to use a responsive theme, so you'd be including a base.css stylesheet for all frame-formats and then adding style sheets for each new frame-format. Something like:

http://yourdomain.com/library/css/style.css' type='text/css' media='(min-width:481px)' />

Then you can use functions within that stylesheet to apply more styles to larger frame-formats. Bones Theme (by themble) is a great place to start learning about responsive web design.

Failing that - Sean is right, start with the meta viewport settings and adjust from there. There's a great answer on iPad and iPhone screen sizes here iPad browser WIDTH & HEIGHT standard

Andy

CSS Wordpress Blog on Iphone

2 Answers2