Messed up Columns in Pro 3.x

Support
#1

I’ve been battling this issue with columns since I upgraded to 3.x. I’m on Pro 3.0.4 right now. I just created a brand new page while in Pro>Content, chose “no container, header, footer” and then added a section and chose the 25% 50% 25% layout for the column. I added a text element to the middle column and the editor preview looks right (see image #1). But when I save and view the page, the text element is in the far left column (see image #2)

  • It doesn’t matter what element I use - i have the same issue.
  • Clearing the site’s cache and my browser cache doesn’t affect it.
  • I see the same thing in Safari, chrome and Firefox.
  • I don’t see any plugins that would affect it.
  • I have the same issue with every column layout
  • Doesn’t matter what PAGE layout I use.

If i initially choose a 3 column layout, and then switch it to 4, it doesnt something even funkier. See screenshot (funky) for that. If i switch it to a 2 column layout, oh boy, we get even stranger (see funky-2)

Here’s the page I’m currently working with and what I used in the screenshots: https://tech4eleven.com/the-starter-questionnaire/

Can i get some help?

1 - columns look right and text element is shown in middle

2 - front end - text element is to the left, not centered

funky - row not even showing correctly now since layout was changed from a 3 to 4 column layout

funky-2 - change row to 2 column layout & and it’s stranger

#2

Hey @Tech4Eleven,

We’re sorry for the issues you’re experiencing. Based on your screenshot, the other columns are empty. For now, please add a Gap element to those columns which will just act as spacers. This is currently a known issue which already has been reported to our developers.

Now to the changing of 3 columns to 2 columns. That is the normal behavior of the columns in the new Row. Please watch this introduction video to understand the usage of the new Row. Once you understand the new Row, you will be able to achieve layouts that are not possible using the Classic Rows.

If you wish to eliminate the third column, you will need to manually delete it. It’s unlike the V2 Row that when you switch to a lesser column number, the excess column just disappears.

Hope that helps.

#3

Thank you SO much. the gap element worked. Appreciate it!

#4

Hi @Tech4Eleven,

We’re glad that we were able to help you out. Have a great day!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.