Title: Issue with multiple columns
Last modified: February 10, 2019

---

# Issue with multiple columns

 *  [Chuckie](https://wordpress.org/support/users/ajtruckle/)
 * (@ajtruckle)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/issue-with-multiple-columns/)
 * As discussed on Github I am raising my issue here about multiple columns not 
   rendering correctly on iPad.
 * [Relevant link added by moderator: [https://github.com/WordPress/gutenberg/issues/12609](https://github.com/WordPress/gutenberg/issues/12609)]
    -  This topic was modified 7 years, 3 months ago by [bcworkz](https://wordpress.org/support/users/bcworkz/).
    -  This topic was modified 7 years, 3 months ago by [James Huff](https://wordpress.org/support/users/macmanx/).
      Reason: added relevant Github link
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fissue-with-multiple-columns%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [Phillip Burger](https://wordpress.org/support/users/phillipburger/)
 * (@phillipburger)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/issue-with-multiple-columns/#post-11211846)
 * I looked through the github and the examples are good. Can you clarify, are you
   expecting the 2 columns on iPad will remain as 2 columns or they will go down
   to 1 column without the extra padding on the left of the 2nd column data?
 * It looks like this code (the 2nd one is not getting used in this situation because
   the padding is overwritten by the 1st) seems to use 600px for the media cutoff
   and an iPad screen is wider than that.
 *     ```
       @media (min-width: 600px)
       .wp-block-column:not(:first-child) {
           margin-left: 32px;
       }
   
       @media (min-width: 600px)
       .wp-block-column:nth-child(even) {
           margin-left: 32px;
       }
       @media (min-width: 600px)
       .wp-block-column {
           flex-basis: 50%;
           flex-grow: 0;
       }
       ```
   
 * If you are expecting the 2 columns to become 1, if this code had a number larger
   than 600 (I used 769px in my Chrome Dev Tools example) they would line up as 
   expected.
 * I see [https://github.com/WordPress/gutenberg/issues/12842](https://github.com/WordPress/gutenberg/issues/12842)
   seems to explain some similar situations.

Viewing 1 replies (of 1 total)

The topic ‘Issue with multiple columns’ is closed to new replies.

## Tags

 * [multiple columns](https://wordpress.org/support/topic-tag/multiple-columns/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [Phillip Burger](https://wordpress.org/support/users/phillipburger/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/issue-with-multiple-columns/#post-11211846)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics