Custom CSS issue

(1) Share

Report

Posted on by powerdevkris

142

Hi,

My custom css design is working fine on designer view. Some section gets broken on browser view (alignment specifically). Any areas that i should check to resolve it?

Categories:

General topics

I have the same question (0)

All responses (6)

Answers (0)

Michael E. Gernaey 53,335 Super User 2025 Season 2 on at

Like (0)

Report

Hi @powerdevkris

Please make sure to understand we cannot see your screen, your CSS, what browser it is, the data etc.

So, its better to show us the problem, and explain your CSS and does it only happen in Edge but not Chrome etc etc.

Was this reply helpful? Yes No
powerdevkris 142 on at

Like (0)

Report

Sorry for the lack of details.

Here is what i see on the designer preview

Preview mode using Edge will become like this

How do i set the preview to show in Chrome as well? Manually using the URL from Edge is block on Chrome.

It seems like something is overriding my CSS on preview

Was this reply helpful? Yes No
Jady 147 on at

Like (1)

Report

If you open your Power Pages Editor in Chrome browser, and click the preview button, then you can preview the web page in Chrome browser.

These days Edge and Chrome browsers render most CSS in the same way.

Don't trust validating your custom CSS in Power Pages Editor. It often displays differently to the standalone web page preview, because it is combined with the extra JS & CSS for the editor controls. It can be frustrating.

Use Developer Tools in your browser to debug CSS alignment issues, then copy & paste those attributes back into your custom CSS file.

Was this reply helpful? Yes No
Suggested answer

Lucas001 2,429 Super User 2025 Season 2 on at

Like (1)

Report

Hi @powerdevkris,

have you been able to resolve your issue?

Other than could you give us some more details from the dev tools?

You can open the dev tools by right clicking on top of your element and select inspect.

Inside the opened window you will be able to see all stylings effecting your DOM-Element.

Top to bottom you can check which rule applies the changes and can either override it or delete it from your code, just check if it is something custom you created or a css rule from bootstrap or power pages itself. Overwriting those is not recommended.

For example the reply button has the styling to the right:

Was this reply helpful? Yes No
powerdevkris 142 on at

Like (0)

Report

Thank you everyone. I was able to inspect the elements and saw that for some of my design. the one from Power Pages is being used instead of my custom one.

Was this reply helpful? Yes No
Suggested answer

Fubar 8,338 Super User 2025 Season 2 on at

Like (0)

Report
As you have indicated the Power Pages CSS is being used instead of yours, at the end of each line of your CSS add !important to override e.g.

.test { background-color: red !important; }

Note: it will not override inline styling, if it is inline you would need to adjust the respective DOM elements with JavaScript/JQuery

Was this reply helpful? Yes No