Dear Support,
http://denwat.rawdemo.co.uk is an example site.
On the home page and a number of other pages there is a row with four columns.
When you shrink the width of the page in a browser, when you reach 780px wide the format changes to just one column due to the CSS code being generated inline:
#pg-10-0 .panel-grid-cell, #pg-10-1 .panel-grid-cell, #pg-10-2 .panel-grid-cell, #pg-10-3 .panel-grid-cell, #pg-10-4 .panel-grid-cell, #pg-10-5 .panel-grid-cell {
width: 100%;
}
I would like to a transition to apply so that at 780px the width went to 50% (for 2 columns) and only when it got to 500px would it then set the width to 100% as above.
Question 1) I want this to apply to all pages where there is a 4 column layout, so I presume I couldn’t apply this to .panel-grid-cell on its own without affecting all other panel-grid-cells across the site. Therefore is it possible to override this with some other identifier, i.e. an additional class reference in the row?
I searched the forum already and found this topic which was helpful, however, it didn’t work for me and this seems to be due to flex-direction being used:
#pg-10-0.panel-no-style, #pg-10-0.panel-has-style > .panel-row-style, #pg-10-1.panel-no-style, #pg-10-1.panel-has-style > .panel-row-style, #pg-10-2.panel-no-style, #pg-10-2.panel-has-style > .panel-row-style, #pg-10-3.panel-no-style, #pg-10-3.panel-has-style > .panel-row-style, #pg-10-4.panel-no-style, #pg-10-4.panel-has-style > .panel-row-style, #pg-10-5.panel-no-style, #pg-10-5.panel-has-style > .panel-row-style {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
Question 2) How would I override the above to be able to achieve the 4 columns > 2 columns > 1 column requirement considering the above?
I’ve been tearing my hair out for a couple of hours over this so any help would be most appreciated.
Regards,
Rob
p.s. great page builder, thank you for making and supporting it.
Hi Rwassell,
This is possible, but it’s only possible to do this on all rows (regardless of the number of columns) without using CSS. You can do this by navigating to WP AdminSettingsPage Builder and open the Layout tab. Tick Use Tablet Layout and then adjust the Tablet Width and Mobile Width accordingly.
Regarding the linked thread, that’s method is no longer supported as it relies on the old layout system. You can technically achieve what is done in that thread by disabling the Responsive Layout for the specific row you’re working on. This can be done by opening the row, heading over to the row styles sidebar and open the Layout settings group. Set the Collapse Behaviour setting to No Collapse. It should be noted that it doesn’t directly accomplish what you’re specifically looking to do.
Regarding the CSS to do this, I’d like to help you with this issue but, unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.