wordpress themes edit layout by responsive breakpoints

WORDPRESS THEMES EDIT LAYOUT BY RESPONSIVE BREAKPOINTS UPDATE
WORDPRESS THEMES EDIT LAYOUT BY RESPONSIVE BREAKPOINTS FREE

The Astra theme is a popular and highly customizable WordPress theme known for its flexibility and responsive design.

WORDPRESS THEMES EDIT LAYOUT BY RESPONSIVE BREAKPOINTS FREE

However, if column widths were based on an absolute size, they would fit side-by-side until they don't anymore, without the need for a hardcoded breakpoint.How to Set Responsive BreakPoints Limits in the FREE Astra Theme for WordPress This is a big change to how the columns block works currently. The part that worries me most is that a columns block that breaks without a breakpoint would probably need to have its columns' flex-basis based on absolute values instead of relative percentages as they are currently done. UPDATE: The core columns block uses gap now! #37436 Is there some kind of theme support proposal to opt themes into using gap instead of margins? Obviously changing the styles so dramatically would likely break backwards compatibility. However, the underlying spacing in columns and other places is still being accomplished via margins instead of the gap property, though it seems like it's understood that this is the next step. It looks like this effort is already underway with the block gap feature having been merged in: #33991 Columns: Avoid using CSS variables for block gap styles #37436Ĭomparing the browserlist config for this project against Caniuse flexbox-gap, it looks like we should be safe swapping the margin stuff that ends up getting a little too specific to easily override with gap.

WORDPRESS THEMES EDIT LAYOUT BY RESPONSIVE BREAKPOINTS UPDATE

Update Columns block to use CSS Grid, add option to adjust grid gap #32137.WIP - Auto-wrapping columns (no breakpoints) #33330.Other issues that have attempted to start conversations similar to this: This search URL should probably find all of them: Here are the blocks I found that include hardcoded breakpoints: However, I feel like this would be a more sustainable approach for future overrideability. Some themes out there in the wild are probably depending on hacky CSS workarounds to change the breakpoint of certain blocks, for example. The challenge to overcome here is that this might not be a very backwards-compatible solution. This approach, combined with some contextual CSS custom properties, would allow for easier manipulation of minimum-width of columns before they break into a single column, for example. A good example is the 'Switcher' layout from Every Layout. Instead, there are ways to write CSS for responsive layouts that do not rely on external breakpoints, but rather internal sizes. Regardless, I don't think that standard back-end breakpoints should cross over into front-end styles. There is also no hook or other customization vector available to change the breakpoints. I recently submitted a proposed solution using CSS custom properties #35808 and then immediately found out that this is not currently possible. Some of these styles are particularly egregious to work around because they involve !important declarations to override inline styles. We either have to work with that specific breakpoint, integrating it with our design system (even if we don't agree with pixel-based breakpoints #16911), completely remove core Gutenberg front-end styles, or otherwise hack around the CSS which no one enjoys doing. Hardcoded screen width media queries like the 600px breakpoint for the core/columns block poses a not-insignificant problem for theme developers.

Wordpress themes edit layout by responsive breakpoints