[Resolved] Breakpoints for new iPads

Home Forums Support Breakpoints for new iPads

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1128093
    Ryan

    I recently got a 10.2 inch iPad, and it’s making me realize it might be time to rethink the breakpoints you have set for example with the wp-block-columns. The 10.2 in portrait is slightly over the 782px breakpoint which makes columns get extremely thin. With this and the 10.5 inch iPad as well it might be better to set the breakpoint up around 850px or 900px, Could you give me some css that would adjust this breakpoint? Thanks!

    #1128340
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    WordPress itself deals with the columns breakpoint. We should be able to adjust it with some CSS, though. Can you point me to where I can see the issue on your site? I’m not seeing it right now.

    Let me know 🙂

    #1128392
    Ryan

    Sorry I thought the theme controlled that, this it’s something they need to rethink then. I don’t use columns too much but for example on this page https://www.ryansmithphotography.com/myrtle-beach-wedding-photography-prices/ I have 4 columns with prices. The newer iPads they are slightly wider than the old common 768px breakpoint so the 4 columns are extremely skinny. This css

    @media (max-width: 900px) {
    	.wp-block-columns {
    		flex-wrap: wrap;
    	}
    }

    will adjust the breakpoint but it causes margin issues I can’t quite figure out. Thanks for the help.

    #1129066
    Tom
    Lead Developer
    Lead Developer

    What if you do this?:

    .price-table {
        margin-left: -1%;
    }
    
    .price-table .wp-block-column {
        margin-left: 1%;
    }
    #1129307
    Ryan

    Thanks for the help, I had to think about it for a while I came up with this that seems to work. But now looking at your code I wonder if that would do the same thing with a lot less css.

    @media (min-width: 600px) and (max-width: 1000px) {
    	.price-table {
    		flex-wrap: wrap;
    	}
    	.price-table .wp-block-column {
    		flex-basis: 49%;
    	}
    	.price-table .wp-block-column:nth-child(odd) {
    	    margin-left: 0%;
    	    margin-right: 1%;
    	}
    	.price-table .wp-block-column:nth-child(even) {
    	    margin-left: 1%;
    	    margin-right: 0%;
    	}
    }
    #1129893
    Tom
    Lead Developer
    Lead Developer

    You should be able to replace everything but the flex-wrap part with what I shared 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.