[Resolved] Change theme's breakpoints

[Andrew]

Hello,

According to the following article (https://docs.generatepress.com/article/responsive-display/) there is 3 breakpoints set on GP: 768px and lower, between 769px and 1024px, 1025px and greater.

Is it possible to change these breakpoints in a way?

Please note that I’m not talking about the Mobile Menu Breakpoint here.

Thanks for your help
Best regards

Andrew

[David]

Hi there,

not easily – the Theme breakpoints are only responsible for Menu, Sidebars, Footer Widgets and Archive columns. What specifically do you need to change?

[Andrew]

Hi David,

Thanks for your message. Sorry about that, I was tired and didn’t even notice that the problem I had was with my CSS code…

Everything is now solved!

Best regards

[David]

Glad to hear you got it resolved.

[Daniel]

Hi!
I want to change 1024px breakpoint to 1366px. How can I do that?

I know in CSS the tablet display is the middle standard, but stats reveal other situation.
Excepting for mobile, the most popular screen sizes are 1366px and 1920px.
Statcounter:
Europe
Worldwide

I think moving the breakpoint from 1024px to 1366px could be a good movement.
Better yet, giving users a Customizer option for defining breakpoints.

Thanks!

[Tom]

Hi there,

Most of these breakpoints are coded into the CSS for now, unfortunately. The exceptions are the items David mentioned above.

Feel free to open a new topic if you need help with that 🙂

[Nic]

are there any plans to modify or extend all the breakpoints?

[David]

Hi there,

it is something we have under consideration for future updates.

In addition GP 3.0 – the next theme update – will move its grid over to Flexbox. Which will make manipulating layouts easier.

Considering that we only drive the theme level layouts which generally are quite simple – Can i ask what you would use the changes for?

[Nic]

i personally prefer more breakpoints like in bootstrap:

$grid-breakpoints: (
        xs: 0,
        sm: 360px,
        md: 576px,
        lg: 768px,
        xl: 992px,
        xxl: 1260px
);

[David]

There is really limited need for numerous breakpoints in the theme as we are mainly dealing with:

Mobile Menu breakpoint which we can be set in the Customizer.
Sidebar and footer layouts
Archive Columns.

If we were to add more breakpoints we would also need to add more customizer options – which we try to avoid on the basis of performance.

Most changes we can assist with a little CSS – such as stacking sidebars or adjusting columns.

If however you are talking about content created with GenerateBlocks then we are looking at editable breakpoints in future updates. This is somewhere i think it is required. Again we use Flexbox in GenerateBlocks Grid Block so changing these are also quite simple with some CSS.

[Author]

Posts