[Resolved] Portrait tablets and masonry

[Tara]

Hi Tom

Could you clarify the main changes in the new tablet support?

It’s a bit confusing because the Unsemantic grid uses (max-width: 767px) or (min-width: 768px), while you’re using (max-width: 768px) for portrait tablet and below. So there are differences at 767px, 768px and 769px.

It also means that the hide-on-mobile and hide-on-tablet classes don’t work as intended at 768px, where there’s a mixture of mobile and tablet CSS.

In the blog masonry, I’d like two 50% columns on 768px portrait tablets, which currently doesn’t kick in until 769px. Though I realise that it’s hard for you to please everyone!

Tara

[Tom]

Hi Tara,

Unsemantic Framework starts mobile at 767px, which is when the hide-on-mobile class will kick in.

I use 768px for some elements because that’s where portrait tablets sit. So I want the mobile menu to show up on portrait tablets and below, but not landscape tablets. The hide-on-tablet class will kick in between 768px and 1024px.

Give this CSS a try:

@media (min-width: 767px and max-width: 768px) {
	.masonry-post {
		width: 50% !important;
	}
}

@media (max-width: 767px) {
	.masonry-post {
		width: 100% !important;
	}
}

Let me know if that works or not 🙂

[Tara]

Hi Tom

Thanks – I got it working by copying the mobile masonry CSS from the plugin and changing everything from 100% to 50%.

Originally I was using hide-on-desktop in my menu items, but now I can’t simply add hide-on-tablet because it hides things at 768px when you’re still showing the mobile menu. I’ve solved it by using a custom class instead, so that I can set the exact breakpoint myself.

It’s great that you’ve added tablet support, but I think it would be helpful if you could give more detailed updates on some of the changes that may affect people with customised child themes. The changelog is quite brief, and sometimes it’s hard to track down exactly what’s changed or the thinking behind it.

Thanks

Tara

[Tom]

Hi Tara,

Sorry about that – hard to be super specific in the changelog sometimes. I try to add a bit more info in the blog post, but it’s not enough sometimes.

I’m always available in here or through email if you have any questions about anything in the changelog.

I usually don’t add anything that makes a visual difference through updates, but sometimes I try and sneak necessary things in (like tablet support).

Sorry again for the hassle!

[Author]

Posts