Archived topic
Problem with 768px breakpoint
5 replies · Started by Rob on August 11, 2021
I am using facetwp and generateblocks. At 768px I want to switch to a fly-out menu. I do this by hiding the filters using 'hide-on-mobile'.
Basicaly this works as expected, except for a screen width of exactly 768px. At that width I get a strange layout.
Generateblocks (or GP?) is creating a css-file in the upload/generateblocks folder for this page with a media query '@media (max-width: 767px)'. Changing this manualy to 768px solves the problem, but adapting the file after every save seems not an attractive solution and I don't know if create new problems this way.
Any solutions?
Hi there,
Tom provides a snippet here that allows you to change the Themes breakpoints:
This does not help me.
I don't want to change the breakpoints.
The point is that GP is generating css with a media query ‘@media (max-width: 767px)’ while 768px is the breakpoint.
Copying this css to ‘@media (max-width: 768px)’ in the stylesheet of my child theme solves the problem.
Why is ‘@media (max-width: 767px)’ generated while ‘@media (max-width: 768px)’ seems to be needed?
To cover off:
GPress uses max-width: 768px
GBlocks uses max-width: 767px
GP was built way back when Tom, with hindsight made a 'mistake', of setting GP to 768.
Although we looked at adjusting this, the repercussions to thousands of sites have made that impossible.
The filters i provided will allow you to change @media CSS rules that GP Dynamically generates. So you can match the GB breakpoints.
For the hide-on-* classes you will however need to manually overwrite them with your own CSS as those are baked into the main.css/
Thank you for the explanation. Understanding what is happening helps a lot.
You're welcome !
