- This topic has 12 replies, 3 voices, and was last updated 2 years, 8 months ago by Tom.
September 3, 2017 at 8:22 am #378315Caroline
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!
CarolineSeptember 3, 2017 at 9:22 am #378360LeoStaffCustomer Support
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.September 3, 2017 at 10:21 am #378390Caroline
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.
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!September 3, 2017 at 11:03 pm #378618TomLead DeveloperLead DeveloperSeptember 4, 2017 at 11:57 pm #379271TomLead DeveloperLead Developer
This has been fixed in the next version: https://github.com/tomusborne/generatepress/commit/0a2781fd648bac04cafb197041e1ec945677eb42
Thank you! 🙂September 5, 2017 at 6:54 am #379478Caroline
Great – thank you! I thought that might be the solution 😉 I’ve updated my files and it’s working great now!
CarolineSeptember 5, 2017 at 10:11 am #379632TomLead DeveloperLead DeveloperMarch 16, 2018 at 2:43 am #521355Caroline
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):
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):
Then, at 767px the tablet grid stops being applied and things look like they should again:
Would you mind taking a look? I suspect it’s a similar issue to the one we ran into in the thread above.
CarolineMarch 16, 2018 at 10:45 am #521795TomLead DeveloperLead Developer
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 🙂March 16, 2018 at 10:52 am #521810Caroline
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!
CarolineMarch 16, 2018 at 10:53 am #521812TomLead DeveloperLead Developer
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 🙂March 16, 2018 at 11:01 am #521820Caroline
Thank you – that is very helpful!
CarolineMarch 16, 2018 at 9:45 pm #522121
- You must be logged in to reply to this topic.