Custom CSS issue

(1) Share

Report

Posted on by powerdevkris

126

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

All responses (6)

Answers (0)

Suggested answer

Fubar 7,964 Super User 2025 Season 1 on at

Like (0)

Report
Custom CSS issue

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
powerdevkris 126 on at

Like (0)

Report

Custom CSS issue

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.
Suggested answer

Lucas001 2,203 Super User 2025 Season 1 on at

Like (1)

Report

Custom CSS issue

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:
Jady 125 on at

Like (1)

Report

Custom CSS issue

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.
powerdevkris 126 on at

Like (0)

Report

Custom CSS issue

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
Michael E. Gernaey 43,413 Super User 2025 Season 1 on at

Like (0)

Report

Custom CSS issue

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.