Viewing 1 replies (of 1 total)
  • 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 seems to explain some similar situations.

Viewing 1 replies (of 1 total)
  • The topic ‘Issue with multiple columns’ is closed to new replies.