CODEWITHSUNDEEP
ipadmobileresponsive-designmobile-safarigrid-layout
Henry Bayuzick
Henry Bayuzick

Reputation: 27

Inline-block not working on iPad

I built a grid layout using a Codrops tutorial and my own knowledge. The grid is setup using display:inline-block; and nth-child to remove padding from the last element so they do not break to the next line. As the grid size changes, I use a different nth-child in the media query to remove padding from the last element, whether it be the 3rd element, 2nd element, or the 1st.

Everything works swell in all desktop browsers, but does not work on iPad.

For some reason on iPad, the grid is breaking in the wrong place, which looks awful.

I don't know where to begin to test this bug because it works fine when scaling the browser window down. I've tried some testing with iOS simulator to no avail. However, what is interesting, is on the initial page load the grid works fine, then once fully loaded, the grid breaks.

You can view the problem here (on iPad): http://www.eugeniacameronfoster.com/new/paintings/

Thanks!

Upvotes: 0

Views: 5022

Answers (2)

Cédric Néhémie
Cédric Néhémie

Reputation: 175

There's a workaround that doesn't require to change the html markup.

Using a negative letter-spacing of -0.31em on the parent ul and then resetting the letter-spacing in the li the space between the lis disappear.

ul {
  letter-spacing: -0.31em;
}

li {
  letter-spacing: normal;
  display: inline-block;
}

An example can be seen here: http://jsfiddle.net/c67U4/

This trick is used in particular in PureCSS grids that use inline-block instead of floating elements.

Upvotes: 0

justinavery
justinavery

Reputation: 2596

There are a few issues that a CSS Tricks article points out.

Basically you need to remove the space between the divs in your grid, so that instead of

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

you need to put 

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

I will put in a vote for you to just bail on the inline-block idea and go with flexbox or box-sizing: border-box;

Upvotes: 2

Related Questions