[Resolved] Theme breakpoints

[epickenyan]

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?

GeneratePress 2.2.2

GP Premium 1.7.7

[David]

Hi there,

here are our recommendations:

https://docs.generatepress.com/article/responsive-display/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[epickenyan]

Seen. thanks

[David]

Does that help?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[epickenyan]

Yes, it does. Cheers!

[David]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kyle]

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.

[Elvin]

Hi Kyle,

It’s Tom’s preference.

See his explanation here. 🙂 – https://generatepress.com/forums/topic/mobile-breakpoints-best-practice/#post-1305318

A wise man once said:
"Have you cleared your cache?"

[Scott]

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.

[Author]

Posts