Solved SP Page Builder

Unable to set column breakpoints on tablet views in SP PageBuilder Pro v.4.0.5

Asked by mjandrew 4 years ago Last activity 4 years ago

One of the big appeals with previous versions of PageBuilder was being able to set breakpoints for Tablet and Mobile views. I can no longer do this within PageBuilder v4.0.5

I know I can adjust the width of columns in the various tablet views, BUT I cannot break two columns so they stack at 100% width? the mobile views automatically stack at 100% width.

I know I can force the tablet view stacking inside a custom.css file but they feels like a bit step backwards compared to previous PageBuilder configuaration options.

The old system worked perfectly for setting breakpoints:
https://www.dropbox.com/s/7u3w0w5bo67ol14/old-pagebuilder.jpg?dl=0

The current verison does not offer breakpoints, only column ordering
https://www.dropbox.com/s/cqif2gd7uqghahu/new-pagebuilder.jpg?dl=0

Is my only option here to use manual custom.css to set tablet view breakpoints?

Thanks,
Mike

Accepted answer

Marked as the solution

Ofi Khan Staff

4 years ago

No problem. I am glad that you have got it. Please accept the answer that helped you. It will be then easier to find the solution for the other users with the same issue. There is a button to accept answer after each comment.

4 more replies

Ofi Khan Staff

4 years ago

Hello mjandrew

We have introduced a new column responsive system. Please check this screencast tutorial and you will get it.

Best regards

mjandrew Asked this

4 years ago

Hi Ofi

I am aware of the new column system, BUT it is missing quite a crucial aspect. There is no option to set a column layout on a tablet to display at 100% width.

If I have a row with two equal 50% columns on a large screen and desktop. I can manually adjust the widths of the 2 columns in tablet view, but I cannot break the columns so they each appear as 100% width stacked on top of each other.

2 equal columns
https://www.dropbox.com/s/rootpq114zh67fc/2columns.jpg?dl=0

No option to set the width to 100% so the columns stack on a mobile:
https://www.dropbox.com/s/fbq8jnsp0fc2v5e/no-100percent-option.jpg?dl=0

I surely can't be the only person who needs the ability to break columns on tablet displays?

Please can I suggest a future modification to either allow 100% column width and stacking, OR for us to be able to set a different row layout structure of different device views:
https://www.dropbox.com/s/cdkl7fsus3upl86/structure.jpg?dl=0

Many thanks,
Mike

Ofi Khan Staff

4 years ago

but I cannot break the columns so they each appear as 100% width stacked on top of each other.

As far in my testing, this is possible. Please share your administrator access here and I will try it. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup with you before sharing.

mjandrew Asked this

4 years ago

Hi Ofi - You are correct about this being possible. This was my mistake.

I had missed deactivating the "fill columns" option on each of the different device views.

I had deactivated that option in widescreen view and I wrongly assumed that would be a global change in all of the 6 device views shows in the top bar.

I subsequently deactivated the "fill columns" option in both "Tablet Landscape" and "Tablet Portrait" and I was able to set each column to 100% in order to have them stacked on those two devices.

https://www.dropbox.com/s/8ebcfv8gcvp2w2k/fillcolumns.jpg?dl=0

Apologies for the hassle. Hopefully I'll fully get to grips with the new SP Page Builder very soon.

In the docs