Question

I’m trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can’t figure out why mobile safari is not displaying them properly:

• the top left logo just plain won’t show up
• the search box in the top right is way too far to the left
• the red slogan in the header “A Resource for Nonprofits etc” is too large, too low, and extends beyond the right border
• the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large

Everything else seems ok, at least on the home page. What’s weird is that all four problems above occur in the header.

Any help would be hugely appreciated!
Thanks!

Answer 1

I figured it out:

Top left logo

The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:

#portal-logo {       /* in the last CSS file */
   margin-bottom: 0;
}

#portal-logo {      /* in the next-to-last CSS file */
   display: inline-block;
   margin: 1.375em 0;
}

Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it’s ok. It’s just really strange that Safari on iOS does not cascade the display: inline-block; style!

Search box

I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.

Slogan

The slogan required the most tweaking. It’s contained in a <div id="slogan">. Here is the old rule:

#slogan {
  color: #EE3524;
  float: right;
  font-size: 110%;
  font-weight: bold;
  margin-right: -190px;
  padding-top: 60px;
  position: relative;
  z-index: 1;
}

And here is the new rule that works on mobile safari:

#slogan {
  -webkit-text-size-adjust: 100%;
  clear:right;
  color:#ee3524;
  font-size:17.6px;
  font-weight: bold;
  float:right;
  margin-right:0px;
  padding-bottom:50px;
  padding-top:0px;
  position:relative;
  text-align:right;
  z-index:1;
}

One of the key differences is the absolute font-size in px, instead of as a % value.

Menu Items font

Likewise, specifying the font-size in px instead of % seemed to be the key here:

Old:

#portal-globalnav li a {
  background-color: transparent;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: bold;
  min-width: 3em;
  padding-bottom: 11px;
}

New:

#portal-globalnav li a {
  background-color:transparent;
  color:#fff;
  font-size:15.4px;
  font-weight:bold;
  padding-bottom:11px;
  min-width:3em;
}

YMMV!