Better Responsive Column Width Support

[jhned]

Hi there,

Just started taking a look at this plugin, and so far, I really like what I see. However, I think that I would run in to a responsive issue with the way column widths are set.

Right now, there are two static fields for breakpoints in the Page Builder Layout settings: "Tablet Width" and "Mobile Width." All the columns drop to width:auto when the viewport is smaller than the mobile width (So the default is "max-width: 768px"). I'm guessing that "Use Tablet Layout" operates the same way, but with the "Tablet Width" value.

The problem is that I don't use just two breakpoints on my sites. The responsive nature of my websites is much more fluid than that. I think that there's an opportunity for an improvement here:

If we allow people to register as many breakpoints as they need to, we can make another improvement: different column widths based on breakpoint, rather than the two or three possible column widths currently available.

To achieve this from a UI perspective, we could have a repeater field for defining breakpoints, and the option for the breakpoint to be mobile-first or desktop-first. Each breakpoint could have a name and resolution.

Once the breakpoint values are saved in the database, we could add a new button called "Responsive" to the Page Builder tab of the WordPress Editor; clicking on it would let a user tab through the registered breakpoints and adjust column widths based on the breakpoint.

Responsive design is the cornerstone of website development today. Improving the responsive user experience and end result would keep Page Builder light years ahead of other page builder plugins.

[jhned]

Hey, has anybody had a chance to look at this? Just wanted to check.

[gregpriday]

Thanks for the awesome feedback @jhned and very sorry about the late reply. I'm busy going through all the Github issues. Trying to neaten things up.

Improving responsive control in Page Builder is definitely high up on the list of priorities. I've seen a lot of requests for things that people want to do/change at different breakpoints.

• Changing row/widget styling at different breakpoints. Mainly for padding and margin values.
• Show/hide widgets at different break points.

It would be a massive under-taking, but ideally, what we'd need to do here is let people makes changes to the entire page and have those changes happen at different breakpoints.

So let's say you have a page created in Page Builder. This would be the master version of the page. Then you'd create a sort of fork version and specify what breakpoint this new version would kick in. Ideally, we'd want users to be able to add, remove and edit rows and widgets. Then Page Builder would need to work out the CSS required to go from the master version to the other versions at the different break points.

This might require some hacking. For example, if a widget content gets changed, Page Builder would need to render both versions of the widget in HTML, then use CSS to show/hide the versions at different break points.

Anyway, that's just a rough idea for now - building on your ideas.

Perhaps this is something we can look into when we're able to get more developers on the team.

[sptutusukanta]

I'm adding it here as I found this thread, searching on Google about breakpoints.

My case here is at least specify the number of columns at different breakpoints. For example, I need 4 columns on the large screens, 2 columns for smaller and 1 for mobile users. I couldn't find any solution for this not even if any simple hack.

Is this possible for now? or will it come in near future?

[ryanovas]

Are there any updates on this? What would be amazing would be if I could set breakpoints on each column - some rows might break down different on different screens. Some kind of UI that acts like bootstrap/flexgrid/etc would be amazing. col-xs-12 col-md-6 etc

I just purchased premium for this as it makes my life so much easier, but the way this plugin handles responsiveness is easily it's biggest weakness right now IMO.

[dominikkucharski]

@ryanovas which premium plugin did you buy to achieve this functionality?

[ryanovas]

@dominikkucharski I meant I purchased the premium license for page builder, not a plugin that added this functionality. If you do come across one though let me know as it would make my life SIGNIFICANTLY easier than the current setup.