How to adjust the width of employee center portal content?

[Dalma P_ll]

Hi there,

I would like decrease the distance on the left and right of the content on every esc page. Where do I find that setting? I have tried modifying the page specific css in page designer for the ec_dashboard as a first try but nothing changed.

I appreciate your help and time.

[RodGallegos · Accepted solution]

Here's how the portal appears OOTB

Ctrl+Right click on any widget instance and open the Instance in Page Editor

Container 1 and Container 2 is where you will make the changes. Start with Container 1. Switch Scope to Employee Center Pro

 Change the width from "Fixed" to Fluid. Then scroll down to find the Save button and click Save. Do that same thing for Container 2

 

 The CSS class field might be empty for Container 1, but for me Container 2 had the bootstrap class "container". I removed it and you will need to do the same if this is the case for you. Then click Save.

 And this is the end result. 

Screen size does play a role in the end user experience. As you saw in the very first screen shot, there's not much space on the sides of my screen because I'm on a 13" laptop. But when I connect to a larger monitor, that space widens significantly. These are just somethings to be aware of as you make changes. Best of luck and cheers!

[Dalma P_ll]

Thanks Rod, this was really helpful. Your step by step instructions were also super clear.

One additional note: I created a style sheet where I defined a custom class. I applied that custom class to one container per portal page. The style sheet was connected to the portal theme with a css include. This way I was able to create a unified width for the content of every esc page. 🙂

[RodGallegos]

Nice! I contemplated adding something like that in my notes, but opted not to because I thought my response was already quite long. Cheers!

[nmaneely]

Are you able to share the contents of your Style Sheet?