WordPress.org

Support

Support » Themes and Templates » [Resolved] Theme iPad and iPhone issues

[Resolved] Theme iPad and iPhone issues

  • zonkD
    Participant

    @zonkd

    There is an issue with the header on the iPad — header only fills about 80% of the page but the body and sidebar are fine.

    On the iPhone — site is all over.

    Any suggestions of what plugins to use with the theme to make it mobile friendly?

    Can the iPad issue be corrected?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Atul
    Member

    @atul1280

    I just checked the demo of the theme (http://wp-themes.com/frisco-for-buddypress/) on iPad and it is working fine. Seems you had changed some css which is creating this problem.

    zonkD
    Participant

    @zonkd

    I did make some changes to add my logo:

    #search-form {
    display: none;
    }
    #header {
    background: #000000;
    white-space:nowrap;
    }

    #header #search-bar {
    background: transparent;
    white-space:nowrap;
    }
    #header #navigation {
    white-space:nowrap;
    }
    #logo a
    {
    display:block;
    width:320px;
    height:70px;
    background:url(logo.jpg) no-repeat scroll left top transparent;
    text-indent: -9999px;
    padding-top: 0em;
    padding-right: 0em;
    padding-bottom: 0em;
    padding-left: 0em;
    border-top: 0em;
    border-right: 0em;
    border-bottom: 0em;
    border-left: 0em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    }

    I removed the no-wraps to test it. That wasn’t the issue. The header still doesn’t fill the page at 100%.

    Any suggestions?

    Andrew Nevins
    Forum moderator

    @anevins

    Can you link the webpage with the issue?

    zonkD
    Participant

    @zonkd

    Sure thing — it’s: Site

    I fixed the iPad issue by adding:

    body.page div#container,
    body.blog div#container,
    body.single div#container,
    body.archive div#container,
    body.error404 div#container,
    body.activation div#container,
    body.search-results div#container,
    body.search-no-results div#container {
    max-width: 100%;
    }

    The gray box in the corner of the header is now gone. I am running theme version 1.6.13

    I still haven’t resolved the iPhone display problem — the body container does not fill the screen and is like 1/3 the width of the phone display — even though it is moving the sidebar below it.

    zonkD
    Participant

    @zonkd

    Cleared out the theme and did a fresh install. Making adjustments 1 at a time until the layout broke on the iPhone.

    The layout “breaks” if you put a logo in the header lager than 320 pixels wide.

    When the logo is set to 400 (or anything larger than 320) the header and menu load to the correct width of the logo image but the body container loads at the 320 width and shows a 80 pixel wide, gray background bar along side all posts until the sidebar loads below it at the correct width.

    Also note that headlines in H1 can be cut off when a single word on a line is larger than the box.

    Where would you correct the minimum width of the body container to be 400 instead of 320?

    zonkD
    Participant

    @zonkd

    Ok. Found everything. Note to those placing a logo in the header and those putting one in the header and removing the search bar.

    If your logo is wider than the 320px you must edit the CSS for mobile at:

    /* Mobile */
    @media only screen and (max-width: 767px) {

    body {
    width: 320px;
    min-width: 320px;
    padding: 0;
    }
    .fullwidth {
    width: 320px;
    max-width: 320px;
    min-width: 320px;
    }

    _________________

    This will set the min width for your mobile layout to match your logo width.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Theme iPad and iPhone issues’ is closed to new replies.