Archived topic
Theme breakpoints
8 replies · Started by epickenyan on February 20, 2019
Hi. I have elements or styles I want to target for either desktop or responsive version. Which breakpoint in pixels should I use for both max and min width? Is it 767, 768 or 769?
Seen. thanks
Does that help?
Yes, it does. Cheers!
Awesome :)
Can someone tell me why the theme breakpoints are max-width 768px, but the Generateblocks breakpoints are max-width 767px.
I'm new to GeneratePress and just realized this.
The footer widgets and header section of the theme use max-width 768px, while the blocks plugin uses max-width 767px.
Shouldn't they both be max-width 767px or be consistent?
I'm also curious why neither is mobile first.
Hi Kyle,
It's Tom's preference.
See his explanation here. :) - https://generatepress.com/forums/topic/mobile-breakpoints-best-practice/#post-1305318
You don't actually need to be consistent. It's perfectly acceptable to use all manner of weird sizes in order to make individual elements transform at a size that best suits them.
For example, let's say you have 4 columns on "desktop" (whatever that is), and you determine that once the width gets down to 1100px, you need to switch to 3 columns (nowadays you would use a flexbox, but bear with me for the sake of example). It's perfectly OK to have a media query at 1100px that is used only to control the 3-col layout.
At the same time, you might find that your hero image works fine at 1920px wide, but at 1366px, a common laptop resolution, you want to switch to an image that has been formatted differently, or maybe a different image altogether. It's OK to throw a media query in there for 1366px and only use it to control the background-image: property of that one hero element.
There is a big difference between the viewports pre-defined in your page builder that get used during development vs. what the CSS defines when the front-end is actually displayed. They don't relate.
