Code for iPhones and iPads

TallPhotoGuy

What code is required so things work properly on iPhones and iPads. On the iPhone the Gallery or Folder is ok, but when you drill down to display all the gallery pictures the left margin is not right.

hewitt.smugmug.com

leftquark

Hi TallPhotoGuy,
I go over how to write customizations just for certain screen sizes on my customizations site here: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

Let me know if you have any specific questions.

TallPhotoGuy

I don't think its a iPhone issue. Somewhere i have a margin issue and photos are off center, to the left. Feel free to look - hewitt.smugmug,com

leftquark

TallPhotoGuy wrote: »

I don't think its a iPhone issue. Somewhere i have a margin issue and photos are off center, to the left. Feel free to look - hewitt.smugmug,com

The following is what's screwing with your site:

.sm-tiles-row-organic .sm-tiles-list {
  overflow: visible;
  margin: 0 0 0 -18px;
}

It has to do with your drop-shadow code. If you apply the following code to your site it fixes the iPhone but it also removes the drop-shadow from the right most images when viewed on a normal monitor. You'll notice that when viewed on a monitor, your images are shifted 18 pixels to the left as well. You'll want to look further into this.

Add something like this (you may want to wrap the code to have it only apply to iPhones):

.sm-tiles-row-organic .sm-tiles-list {
  margin-left: 0px !important;
}

P.S: I'm sorry I couldn't offer a complete solution ... but hopefully this gets you on the right track.