[Resolved] Breakpoints for new iPads

[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!

[Tom]

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 🙂

[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.

[Tom]

What if you do this?:

.price-table {
    margin-left: -1%;
}

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

[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%;
	}
}

[Tom]

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

[Author]

Posts