Theme iPad and iPhone issues

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

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?

Can you link the webpage with the issue?

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.

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?

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.