[Resolved] issue with CSS in unsemantic grid?

[Caroline]

Hello Tom

I have a problem with the way grid elements are being displayed at screen sizes of 1025px only. I think it’s a conflict between unsemantic grid media queries, but it’s very hard to explain without attaching screenshots. Would it be possible to email you with an explanation and screenshots? I can’t see a way of attaching them in the forum.

Thanks so much!
Caroline

[Leo]

Hi Caroline,

Are you using the method here? https://docs.generatepress.com/article/creating-columns/

You can upload to a site like this: https://postimages.org/ then post the direct links here.

However it sounds like a link to the site might be more helpful, in which case you can send it through Account Issue here: https://generatepress.com/contact/ and just reference the topic.

[Caroline]

Hi Leo

Yes, I’m using the method in the first link.

Basically, there’s something strange going on in the unsemantic grid CSS. I think I’ve found the cause, and I’m pretty sure it’s in the original GP unsemantic css stylesheet and not due anything I’ve done. I’m using GP Premium 1.4.3.

It’s specific to screen widths of 1025 pixels. There appears to be a conflict because divs are having classes applied from both the desktop and tablet settings at the same time. It’s hard to explain, so I’ve linked to some screenshots.

In this screenshot https://postimg.org/image/qcroh14hx/, which shows the issue I’m having, the divs are at 33% width, but stacked. They should be next to each other. This seems to be because a ‘clear: both;’ is being applied to them by the tablet-grid-100 class, even though the width is being set by the grid-33 class.

In this second screenshot https://postimg.org/image/7tde3dkw5/, i’ve unchecked the ‘clear: both;’ and they are no longer stacked.

If you view the site at 1026 pixels https://postimg.org/image/d23tnidxh/, it behaves as it should, and also at 1024px https://postimg.org/image/yd1drrw1x/.

I think the problem is possibly due to a conflict with the min-widths and max-widths in the media queries, as the grid-33 class has a min-width of 1025px, and the tablet-grid-100 class has a max-width of 1025, so aspects of both are being applied at the same time which probably shouldn’t be happening?

Could you let me know what you think? I’ve spent ages trying to figure this out, and this is the only thing I can come up with! I’m currently developing locally, but if it’s helpful I can get the site up on a staging server so you can access it yourself.

Thanks so much!

[Tom]

This looks like it could be a bug in the file itself.

I’ll do some testing and will update this topic 🙂

[Tom]

This has been fixed in the next version: https://github.com/tomusborne/generatepress/commit/0a2781fd648bac04cafb197041e1ec945677eb42

Thank you! 🙂

[Caroline]

Great – thank you! I thought that might be the solution 😉 I’ve updated my files and it’s working great now!
Caroline

[Tom]

Awesome! Thanks again 🙂

[Caroline]

Hi Tom

I’m running into another issue with the grid, this time at tablet sizes. Here’s what I think is happening:

The tablet media queries for GP, and in my child theme, are as follows:

@media (max-width: 1024px) and (min-width: 769px)

The tablet media queries for the grid are:

@media (max-width: 1024px) and (min-width: 768px)

This means that at 768px, the tablet grid is being applied, but so is my CSS for mobile screens, which is messing things up a bit! Here are some images to demonstrate:

Here’s what the tablet CSS should look like (769px):
https://postimg.org/image/yc923obxx/

At 768px, the tablet grid is still applied, but the formatting of the text box is messed up as the mobile formatting is being applied (it should look like the image above):
https://postimg.org/image/60ni62mqd/

Then, at 767px the tablet grid stops being applied and things look like they should again:
https://postimg.org/image/c1l735h2d/

Would you mind taking a look? I suspect it’s a similar issue to the one we ran into in the thread above.

Thank you!
Caroline

[Tom]

Hi Caroline,

A lot of the GP mobile functionality kicks in at 768px, as that’s the portrait size for most tablets. In most cases, this isn’t wide enough for the desktop menu etc.., so we apply the mobile menu at 768px instead.

In your case, it looks like your custom CSS should be using 767px instead of 768px.

Let me know 🙂

[Caroline]

Hi Tom

Yes, I did manage to fix it using 767px, but I felt it was a bit hacky, as most of my mobile CSS is under 768px. Maybe I should change all my mobile CSS to max-width 767px?

Thanks for getting back to me anyway!

Caroline

[Tom]

It depends on what you’re trying to target with your CSS.

768px applies to portrait tablets and below.

767px applies to mobile only.

So depending on what you’re CSS is accomplishing, you can use both 🙂

[Caroline]

Thank you – that is very helpful!
Caroline

[Tom]

No problem! 🙂

[Author]

Posts