Hi guys, thanks for the all hard-work you are doing with the plugin.
Since the version 2.5 of Pagebuilder I’m experiencing problems with the layout of my website in mobile.
After the update everything appear squeezed (feature widget, images, …) in mobile devices.
I’ve returned back to the 2.4 version but do you know if we have to do something special in order to see everything like before or there’s an known issue that you are going to solve in future version?
Thanks, great job guys!
Hi @Juliman
Sorry we weren’t able to reply sooner. Ideally, we need to see the problem happening live. What theme are you using? Can we perhaps test locally with that theme?
Thanks
Hi Andrew, thanks for your reply.
I’m using Storefront. You can test in my dev environment here https://tiendatatuajes.com/dev/
Thanks a lot!
You can compare the 2 layouts between:
– The dev version, that is https://tiendatatuajes.com/dev/ and has the latest version of Page Builder and their Widgets.
– The prod version, that is https://tiendatatuajes.com where I have the previous version of Page Builder and their widgets to see the differences between the layouts.
As you can see everything appear squeezed in the dev version :S
Cheers!
Any news?
Thanks.
Thanks for the big wait. It looks like the responsive CSS isn’t being output for the new flex layout. Please, can you try:
1. Is a caching plugin being used or is there a hosting caching option. Please, clear it. Any change?
2. Temporarily deactivate all plugins not authored by SiteOrigin. Any change?
If all else fails you can use the legacy layout engine but that isn’t ideal. WP Admin > Settings > Page Builder, open the Layout tab and set *Use Legacy Layout Engine* to *Always* It would be best to find the cause of the issue.
Hi Andrew, thanks for your reply.
Any of the solutions you proposed to me works:
1. I don’t have any cache plugins. There is no cache option activated in my hosting neither.
2. I deactivated all the plugins except the SiteOrigin ones, nothing changed.
3. I select to use the Legacy Layout Always, nothing changed.
I’ve clear cache in each of the steps. I’ve checked the website through mobile phones and desktops with differents browsers… Nothing changed.
Sorry :(
Any other solution?
Thanks.
* Any of the solutions you proposed to me doesn’t work, I mean.
Ok, let’s test the theme. Deactivate all plugins at once, all together, except for Page Builder.
Switch to a default theme like Twenty Seventeen or Twenty Sixteen.
Re-test. Any change?
Nothing changed :(
You can see by yourself in the url of /dev/
I have the twenty sixteen theme active right now.
Thanks Andrew.
Is Settings > Page Builder > Layout > Responsive Layout enabled?
Yes, Responsive Layout enable. Use Tablet Layout disabled.
If you create a new page and go to Page Builder > Layouts > Prebuilt Layouts and choose one, save the page. Is it responsive?
Yes, it’s responsive.
Ok that’s something then.
If you create a new page, click Page Builder > Layouts > Import/Export and import one of your existing Page Builder pages is the new copied page responsive?
If I exported and imported the result is the same, not responsive.
Could be how I’ve constructed the rows or the columns?
I mean, I have some rows and columns creating the layout I want for desktop. But in the last version on mobile everything is responsive but in the latest PG version all the rows are compressed keeping the layout (Instead of putting one under another)
Thanks.
Sorry, I didn’t explain myself very well.
I mean, my layout is composed by several rows. Some of them have several columns dividing the space.
In the previous version of PG (2.4) the layout on desktop and mobile phones it’s OK and responsive (When I say responsive I mean that instead of showing 3 columns in the same space in showing 1 under the another )
That is not happening in the last PG version (2.5). It’s always putting all the 3 columns, whatever the resolution is. And as a result, the text and the images appear compressed.
I’m not sure yet. Please, could you download the home page layout we’ve been checking and send me the JSON file? You can use a service like https://wetransfer.com/ to send the link. Thanks!
Sure!
https://we.tl/sjK5REgxdz
Thanks.
Thanks. I see the issue locally too. Let me forward this to Greg and see if he can lend a hand. Will reply ASAP when we know more.
Thanks a lot, Andrew!
Thanks for the wait. We’ve found the bug and will attend ASAP. It’s looking like any Custom CSS added to rows or widgets in the Attributes section is being incorrectly included in the code and breaking the responsive layout. Options now would be to either move those Custom CSS attributes over to CSS rules rather OR to roll Page Builder back or to wait for the update which should resolve this issue.
Thanks a lot for your fast support Andrew, so glad we are being able to detect the issue.
I will continue working with the previous version (2.4) until you guys release the new version.
Thanks! ;)
Julián.
Thanks for your help, much appreciated! You can follow the progress of this bug here: https://github.com/siteorigin/siteorigin-panels/issues/423.
Greg pointed out that the issue it looks like is using a media query in a Custom CSS field. Please, can you check widget Custom CSS fields and ensure there are no media queries there:
@media (max-width: 768px){ font-size: 0.5em; }The update will error check for this but you’d want to remove it because a media query won’t work in a Custom CSS field, you’d need to add a rule instead.
Here is a quick reference thread on that: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles.
Perfect Andrew! Working now, damm media queries hehe.
But yes, makes sense, If I remember well the CSS Mobile Style was an update of the lasts versions. Everyone that was using media queries on the only CSS entry input is going to have the same problem. Nice to have a check now.
Happy to help. I will update PG to the last version, now that we have detected where the problem was.
Thanks!
Julián.
Super, glad to hear that did the trick. All the best.