[Support request] Additional Breakpoint

[Ryan]

Hello,

For starters, want to say that I love GeneratePress and GenerateBlocks, it has truly been a game changer for my business and has seemingly removed most of the faults of traditional page builders which previously made life a nightmare. Thank you for the work you’re doing!

There is one question I had regarding breakpoints – is there any somewhat easy way to add in an additional breakpoint? For the most part things are fine, but the one drawback I’ve had with GP (and literally every other page-builder) is from desktop->laptop I find myself frequently adding in style overrides mostly to tighten up the padding, adjust font sizes slightly, etc. It may just be too much OCD on my part, but there’s a brief window in-between the current desktop and tablet breakpoints where I could see a significant amount of benefit being able to adjust the styles through he editor and not muddy up the additional CSS section.

When I design my own sites it tends not to be a problem as I can anticipate that limitation, but does become an issue when I receive mocks from other designers (who I also try to wrangle in and explain the limitations).

I guess this would be fairly comparable to Bootstrap having a few extra breakpoints, though I feel like even just one more would make the world of difference in this case.

Just given the UI implications in the editor I’m guessing this isn’t already an option, but was wondering if it’s something maybe on the GP team’s radar of being added in by default, or having the option to add in in the future.

Thanks again for all you do!

[David]

Hi there,

first off – thank you so much for the kind words. It makes our day to hear this!!

At the moment there is no way to register an additional breakpoint in either the Theme or GenerateBlocks.
So it does rely on Custom CSS.

It is on our radar, particularly for GenerateBlocks where we too see a need for it. And we are currently refactoring its CSS engine that will make that a possibility for the future.

Regarding the Theme breakpoints, those are fairly limited today, eg. Typography has destktop / tablet / mobile. Whereas most other settings such as Spacing is limited to just desktop / mobile. Which will be addressing as well.

But in the Theme, are there any areas where you feel another breakpoint would be necessary ?

[Ryan]

Hey David,

That’s wonderful news! It’s usually the case that I think of something I’d like to see in this theme/plugin and you guys are either already working on it, or I update and boom there it is already haha. That’s what I love about the product, it just makes sense!

Now that I think about it, most of my concerns are really around the breakpoints in GenerateBlocks as that’s where most of the editing is happening so might have been better for me to post over there – woops! Glad to know it’s on the radar though, that’ll just make an already great experience even better.

For the theme side of things though, I think really typography is where I’d most want this feature anyway. Fine-tuning heading sizes, body copy, etc would be great around laptop, but the most prevalent use case I have would be the nav. Right now I almost always end up doing an override on the nav styles to update font sizes around laptop to prevent text wrapping. Usually set the font size what I want for laptop and then add a min-width media query around 1200-ish for the desktop size. Not horrible, but again, OCD haha.

I definitely could just bump up the nav breakpoint, but often my clients’ clients are older folks using laptops and I was hearing all too often, “they can’t figure out the hamburger menu” *facepalm*. I also often mess with the logo size and could see a use for more breakpoints there.

Overall though I think if this is rolled out to even just GenerateBlocks it’d be a night/day difference.

Love that you guys are so receptive to feedback, and thanks so much for the quick response. The future looks really bright for GP/GB!

[Tom]

Hey Ryan,

Sorry for not getting back to you sooner!

A lot of breakpoints are difficult to achieve without adding a lot of code, but we have specific plans for a better CSS generation system in GenerateBlocks that will likely make it an easy thing to implement without adding any additional bloat.

For some things like the nav, it’s sometimes easier to write a little bit of CSS for edge-cases. That being said, we will definitely keep it in mind for typography specifically.

Thanks!

[Author]

Posts