SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iphone margin/width issue with wordpress default themes

    Hello all,

    I am new to the forums, just signed up. I am hoping you might be able to help!

    I am currently having issues with displaying theme Twenty Thirteen on an iphone/mobile device when the page has a widget/application embedded on it.

    I have put together a test page http://makemoneeonline.com to demonstrate this. (by the way this isnt spam or anything, its just an extra domain I had lying around)

    Pictures of the problem are posted here: http://makemoneeonline.com/?p=9

    There is a post which features a contest widget: http://makemoneeonline.com/?p=4

    and another page that has a would be coupon widget on it: http://makemoneeonline.com/?page_id=2

    Both produce the same problem viewed on iOS, although it is more serious, the wider the widget/app.

    I am having this problem on a couple website that both are running twenty twelve and twenty thirteen. The same problem exists either way.

    I have tried searching for a fix and the best I could find allowed the page to display correctly, but had the apps running off the side of the page which is unacceptable, even if scrolling is enabled. I need it to basically look the way it does when viewed on iOS currently except with the rest of the page/content stretching out the full width. The site needs to remain full responsive otherwise.

    Hope this makes sense. Any help is highly appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi brometheus55. Welcome to the forums.

    Unfortunately, plugins like these from Facebook and other sites tend to be frustratingly non-responsive, fixed-width PITAs, and there's only so much you can do about it. Some developers have started to come out with more responsive options, so that's the first thing I'd be looking into.

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi brometheus55. Welcome to the forums.

    Unfortunately, plugins like these from Facebook and other sites tend to be frustratingly non-responsive, fixed-width PITAs, and there's only so much you can do about it. Some developers have started to come out with more responsive options, so that's the first thing I'd be looking into.



    Thank for your response. I would like to note that the apps used, actually appear at the correct size when viewed on a iphone, but the rest of the theme is squished horizontally leaving the giant margins. If you view the page on a phone (iphone at least) you will see what I am talking about. I see no reason these things cannot fit on screen correctly as i've witnessed them display correctly on other sites running wordpress.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    With responsive design, you need to go through your style sheet(s) with a fine tooth comb and make sure there are not styles in place that will kill your layout on a small screen, such as this:

    Code:
    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    max-width: 1040px;
    padding: 0 376px 0 60px;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you have a fixed width element dropped inside a fluid layout then the layout continues to squash while the fixed width element does not. This is why the content on the mobile moves smaller while the actual page is scaled to fit the fixed width item.This leaves fluid content appear squashed to the left on mobile.

    You would either need to put the widgets inside a container that is a percentage width (100%usually) and then hide the overflow or set scrollbars to appear. Or set the min-width on the page to be the same as the width of the widest fixed width element on the page.

    e.g.
    For your coupon page that would be 960px;

    Code:
    body{min-width:960px}
    Add a special class to the body to affect only that one page.

    You can't have it both ways and if you want fluid then you need fluid elements or scale fixed width elements smaller. If you insert a fixed width element in a fluid layout then the layout will break at the point that the fixed width element is the wider than the screen. As mentioned above you either hide the overflow, scroll the overflow or stop the page getting smaller with min-width. (Or create a widget that squashes nicely )

  6. #6
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    Code:
    body{min-width:960px}


    Yes! This seems to be working fantastic. I added this code to my child theme css, and it fixes the issues on both pages! This seems to be exactly what I am looking for. Now all I need to do is figure out how to do what you are saying and create a separate class for individual pages. Excuse me for for not knowing much CSS. If you could hit could help me out with the correct code to do that that would be helpful. Do I need to add code to the body tag of my header.php file and then in the CSS? I am currently searching for how to do this, but coming up a little short. Will update if I figure it out. Thank you!!!!

  7. #7
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing. How can I create a class like:


    Code:
    .home {min-width:450px}

    ...but not have that affect the class .paged


    For example, my homepage and the paginated pages page 2, page 3 etc both use the class "home" in the body. The paginated pages also include the class "paged" So how can i tell it affect "home" but not if it is also "paged"....so it will only affect just the main page of my blog.

    If that makes sense.


    Thanks.

  8. #8
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm I thought I made a post with the the page classes showing you that i discovered the fix:

    Code:
    .page-id-28799 {min-width:960px}
    .home {min-width:425px}
    Not sure if it could have been deleted but anyway the above seems to be working and I am wondering if it checks out as legit code.


    Also still wondering about the post above for excluding a page class.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by brometheus55 View Post

    For example, my homepage and the paginated pages page 2, page 3 etc both use the class "home" in the body. The paginated pages also include the class "paged" So how can i tell it affect "home" but not if it is also "paged"....so it will only affect just the main page of my blog.

    If that makes sense.


    Thanks.
    If I understand you correctly then just over-ride it with another rule.

    e.g.

    Code:
    .home {min-width:450px}
    .paged {min-width:0}

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by brometheus55 View Post
    Hmm I thought I made a post with the the page classes showing you that i discovered the fix:
    Code:
    .page-id-28799 {min-width:960px}
    .home {min-width:425px}
    Not sure if it could have been deleted but anyway the above seems to be working and I am wondering if it checks out as legit code.
    Yes that's fine as you just over-ride the value with another class.

    Also still wondering about the post above for excluding a page class.
    I gave ytou the answer above and its just the same as you have already done in that you just reset the value using the paged class. If you wanted to be clever you could use the :not selector but it gets complicated and support is only IE9+.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body.home:not(.paged) { background:red }
    </style>
    </head>
    
    <body class="home paged test">
    <p>I'm only red if paged is not present in the body tag.</p>
    </body>
    </html>

  11. #11
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If I understand you correctly then just over-ride it with another rule.

    e.g.

    Code:
    .home {min-width:450px}
    .paged {min-width:0}


    Makes perfect sense and works!! That seems to be the last of my problems on this issue. Again I want to say thank you so much for your help and time, can't tell you how much I appreciate it.

  12. #12
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that's fine as you just over-ride the value with another class.



    Thanks again, just curious what did you mean by this?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by brometheus55 View Post
    Thanks again, just curious what did you mean by this?
    lol - I think I misread the post. Just ignore it as it makes no sense when I look back. I was still thinking about multiple body classes. Sorry

  14. #14
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, cool...lol. Thanks Paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •