WordPress.org

Ready to get started?Download WordPress

Forums

Frisco for BuddyPress
[resolved] Theme iPad and iPhone issues (7 posts)

  1. zonkD
    Member
    Posted 1 year ago #

    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?

  2. atul1280
    Member
    Posted 1 year ago #

    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.

  3. zonkD
    Member
    Posted 1 year ago #

    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?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you link the webpage with the issue?

  5. zonkD
    Member
    Posted 1 year ago #

    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.

  6. zonkD
    Member
    Posted 1 year ago #

    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?

  7. zonkD
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.