I'm running into a layout issue on a site I'm currently working on.
What I want is a 4-column layout, evenly spaced, with each column having a 20px margin on either side (just like the screenshot of the frontend editor).
However, this doesnt work when actually previewing the site, as the last column is always forced to a new line, breaking the layout.
I have attached screenshots of the row and column settings. No matter what combination of padding and margins i try, the last column is always forced to another line. The only time this dosent happen is if i set the column margins to 'none'.
Is there something I'm missing? Please let me know how I can fix this, thanks!
Can you remove the margin from the row settings. Then use the padding and margin options on the columns settings.
See attached screenshot of what we mean. Try that and if you are still getting the issue give us access to the backend - username password with admin role - we check this out from that side.
We checked the layout from the backend and it seems you are using internal rows. Could you consider just using the regular rows with 4 columns using a background image. Then add in the call to action on top of those columns. The layout would be simpler and it would avoid the issue you are having.
That solved the issue to an extent. I ended up re-creating the entire row with a 4-column layout. But instead of using column padding for spacing on the top + bottom of each column, I instead used divider elements, evenly spaced on the bottom and top which seems to have solved the issue.
Case in point: the columns seem to break when internal column padding is used for spacing, along with column margins set on the entire row.
Not sure if this is a bug in the front end editor, but it would be good to address since its unexpected behavior. Thanks for all of your help!!
I'm running into a layout issue on a site I'm currently working on.
What I want is a 4-column layout, evenly spaced, with each column having a 20px margin on either side (just like the screenshot of the frontend editor).
However, this doesnt work when actually previewing the site, as the last column is always forced to a new line, breaking the layout.
I have attached screenshots of the row and column settings. No matter what combination of padding and margins i try, the last column is always forced to another line. The only time this dosent happen is if i set the column margins to 'none'.
Is there something I'm missing? Please let me know how I can fix this, thanks!
Attached files: Screen Shot 2022-09-16 at 3.16.56 PM.png
Screen Shot 2022-09-16 at 3.16.19 PM.png
Screen Shot 2022-09-16 at 3.21.30 PM.png
Screen Shot 2022-09-16 at 3.22.44 PM.png
Hi there,
Can you remove the margin from the row settings.
Then use the padding and margin options on the columns settings.
See attached screenshot of what we mean.
Try that and if you are still getting the issue give us access to the backend - username password with admin role - we check this out from that side.
Respond privately.
Attached files: Edit-Page-“Sample-Page”-‹-stage-—-WordPress.png
Hi Shawn,
We checked the layout from the backend and it seems you are using internal rows.
Could you consider just using the regular rows with 4 columns using a background image. Then add in the call to action on top of those columns. The layout would be simpler and it would avoid the issue you are having.
Try that.
Noah,
That solved the issue to an extent. I ended up re-creating the entire row with a 4-column layout. But instead of using column padding for spacing on the top + bottom of each column, I instead used divider elements, evenly spaced on the bottom and top which seems to have solved the issue.
Case in point: the columns seem to break when internal column padding is used for spacing, along with column margins set on the entire row.
Not sure if this is a bug in the front end editor, but it would be good to address since its unexpected behavior. Thanks for all of your help!!