Unable To Set Column Breakpoints On Tablet Views In SP PageBuilder Pro V.4.0.5 - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Unable To Set Column Breakpoints On Tablet Views In SP PageBuilder Pro V.4.0.5

M

mjandrew

SP Page Builder 3 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

0
5 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #90531

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #89587

Hello mjandrew

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

Best regards

0
M
mjandrew
Accepted Answer
3 years ago #89629

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #89638

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.

0
M
mjandrew
Accepted Answer
3 years ago #90530

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.

0