iPhone Spacing Issue

[Kira Woodmansee]

I designed the portfolio site raftermen.com to appear with no space between the images, per the client’s request. It works fine on desktops, iPads, and iPhones in landscape mode, but on the iPhone in portrait mode, big gaps appear between the images. I’m using NextGen Gallery to display the portfolio, and I tried adding a padding: 0; and margin: 0; to all the classes surrounding the image. That didn’t work, and neither did applying the global whitespace reset to the iPhone. We’re not talking a few pixels here. This is at least 20 or 30 px. What’s really odd is that this issue doesn’t appear in a browser window when it’s resized to mimic the iPhone, or in an iPhone emulator that I tried.

Another of my sites, castle-w.com/gallery, also uses NextGen Gallery but not JumpStart. That site is not responsive (yet) but its gallery spacing isn’t affected by the device. I’m wondering if some of JumpStart’s responsive functionality is causing this?

So far, Google searching isn’t turning up much that’s useful. Any help/advice would be appreciated.

Topic

[Jason Bobich]

Hello Kira,

This is a really awesome Jump Start website, definitely one of the nicest Child themes I’ve seen so far!

Here’s my guess from looking at your site on this. It looks like you’re giving the image blocks a specific height.

This height I assume is designed around the specific dimensions of the images you’re using. However, once you get down to a certain viewport narrowness, these images starts to become re-sized smaller to fit. When this happens, their heights are no longer 225px, however the surrounding block is. — So the result is that the smaller the viewport, the larger this space is going to be, i.e. whatever is left between the image and the 225px.

Note you can see this in viewing your site on an iPhone in landscape mode where the images are not resized. In this case there is no spacing between your images.

What’s really odd is that this issue doesn’t appear in a browser window when it’s resized to mimic the iPhone

It actually does, but I think you’re just not putting your browser winder small enough to actually mimic the portrait viewport of an iPhone. In the screenshot below, you can see the space starting to emerge as we go narrower in Chrome.

So, just get rid of this —

@media (min-width: ... ) {
	.ngg-gallery-thumbnail-box {
	    height: auto;
	}
}

[Kira Woodmansee]

Thank you so much Jason, for the fix and the compliment. That did it!

I’ve gotta give props to the designer who gave me such a slick .psd to work with and to Angela Bowman, who taught me most of what I know. 🙂

[Author]

Replies