Unanswered

BUG Column gap breaks multi-column layouts

(0) Share

Report

Posted on by arpost

453

I seem to have found a bug with the column gap setting in Power Pages. I have a Power Pages app that uses the "blank" template. I have a two-column section and have added a Column Gap of 15px. In the Editor, this is how the results appear:

However, when viewing the same column section on the site itself, the gap apparently forces the flex items to wrap to the next line:

When I put the column gap back to 0px, the section shows as expected but without the column spacing.

Anyone know how to fix this issue?

Categories:

General

All responses (3)

Answers (0)

Fubar 7,966 Super User 2025 Season 1 on at

Like (1)

Report

Re: **BUG** Column gap breaks multi-column layouts

I am guessing that your adding padding is making the width too large for the current max width setting (these widths are usually set using media tags in the out of the box CSS) and so it is doing responsive design and repositioning the 2nd column (like if you dragged your browser window narrower). If this is the case then you will need to make adjustments to the column widths or the media tags, so the width with padding fits within the max width of the respective media tags

An alternative may be to try adding padding or margin to the inside of the Columns rather than to the outside (but this may depend on what you need)
arpost 453 on at

Like (0)

Report

Re: **BUG** Column gap breaks multi-column layouts

Thanks for the reply, @Inogic. Doesn't that mean, though, that the values would have to manually updated in the CSS file if ever section/column settings change (e.g., it becomes a three column layout, I change margin/padding settings?
Inogic 1,023 Super User 2025 Season 1 on at

Like (1)

Report

Re: **BUG** Column gap breaks multi-column layouts

Hi @arpost ,

As per our understanding, you are looking for column gap of 15px in between two columns,

There is another way to achieve this using CSS in Power Pages, you can try that way with below steps:
Step 1: Navigate to the CSS file for the Respective Web page. For this you can Click on Edit Code as shown in below screenshot,

Step 2: Add below lines of code in CSS file,

.container .columnBlockLayout:nth-child(1){
width: 47% !important;
}

.container .columnBlockLayout:nth-child(2){
width: 47% !important;
}

Step 3: Click on SYNC to save changes,

Also, you can see the Column gap is set as 15px.

This will result as follows:

If this answer helps, please mark it as an Accepted Solution so it would help others to find the solution.

Thanks!
Inogic Professional Service Division
An expert technical extension for your techno-functional business needs
Power Platform/Dynamics 365 CRM
Drop an email at crm@inogic.com
Service: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/