rxnlabs

Global CSS breakpoints that every plugin and theme respects. With browsers supporting CSS variables, users should be able to set their own breakpoints for what they think is desktop, tablet, and mobile. A new menu item in the Settings menu or a tab on the Appearance menu. Users set “Desktop = 1200px/75rems/75ems, Tablet = 768px/48rems/48ems, etc….” . When these settings are set, WordPress outputs some CSS such as:

:root {
--desktop: 1200px;
--tablet: 768px
--mobile: 468px;
}

The plugins (especially built-in Blocks and third-party blocks) and themes take those CSS variables into account:

@media(min-width: var(--desktop)) {
/* do something like set the default columns in a grid*/
}

This would fix problems with different plugins deciding what they believe is the breakpoint since a plugin has no idea about a theme’s styles.

Name *

Email *

Website:

Topic Title (Maximum Length: 80):

Forum:
— No forum —AI and WordPress Articles Blocks Showcase Discussions Events Introductions Jobs and Working in WordPress Podcast Episodes Site and Block Editor