search

tomusborne / generatepress

439 stars 88 forks source link

Bug?: Unified media queries #613

Open frzsombor opened 3 weeks ago

frzsombor commented 3 weeks ago

Description

Today I realised that GeneratePress and GenerateBlock are using different media queries for mobile/tablet breakpoint by default.

GeneratePress defaults GenerateBlocks defaults
Mobile: 0-768
Tablet: 769-1024
Desktop: 1025-∞		 Mobile: 0-767
Tablet: 768-1024
Desktop: 1025-∞

Because of this, between 767px-769px, different parts of my website starts behaving unexpectedly and it bothers me. I've tried using the undocumented media query filters for overriding GeneratePress media queries to match GenerateBlocks, but found that not everything is affected by this filter. For example this part is hardcoded: assets/css/main.css#L1566-L1652

I think GP should follow GB's breakpoints everywhere (as those are more conventional) or at least media query filters should affect all media queries of GP. I can think of many different solutions, but I'm only started working with GP&GB for a week, so I don't fully understand how it works yet.

As the generate_media_queries filter is undocumented, I'm submitting this issue as a feature request, instead of a bug, however I think GP and GB using different breakpoints could be easily considered a bug.

References

https://github.com/tomusborne/generatepress/blob/3.4.0/inc/theme-functions.php#L356-L374 https://github.com/tomusborne/generateblocks/blob/1.9.1/includes/functions.php#L186-L197

frzsombor commented 3 weeks ago

UPDATE: Ok, now I actually think that this is a bug 👾. I've searched all assets/css files for 767px and 768px and I can see that 768px is sometimes used inconsistently as the max for mobile (for example here), and many times correctly as the starting point for tablet (for example here). Updated the CSS files and now the breakpoints are beautifully consistent. Added a PR.