Urgent Help needed in reducing the size of the Content Experience widget on Employee Center Pro Page

[Deepika Veerank]

I am looking to reducing the size of the Content Experience widget on Employee Center Pro Page. I had tried with page css but that did not work.

[RodGallegos]

Hello @Deepika Veerank I've messed with this just a little bit. The only way I know how to shorten the height or reduce width is through CSS. While using Dev tools in your browser, take a look at all of the html elements that make up this widget. Text size, padding, margin, line-height, button size, flex etc. All of these have their own rules that will affect the sizing of the widget and will have to be addressed in order to reduce the height and or width to your liking. It also looks like you've selected the horizontal direction which should work in your favor as I believe the work to reduce the widget size would increase with the additional html elements that appear with the vertical scroll view. Something else to consider is the height of the image. Maybe try a shorter jpg and see if that changes the height. Best of luck to you and I will follow your progress!

[RodGallegos]

Found some more helpful css. This will shorten the height of your image container. 

If you have the vertical scroll, you'll need to decrease the flex value as well here:

and here:

 This was the result:

 

 Please mark if helpful! Cheers!

 

[Deepika Veerank]

Hi @RodGallegos Thank you for the response! and that is what is exactly need. But I tried saving the css style sheet with both %  & rem but it is not reflecting. When I change in browser console it is working fine.

Any thoughts please!

[RodGallegos]

Hello there Deepika, 

Remember that the core virtue of CSS is "specificity". If the Selector isn't specific enough, your definitions/rules will not apply as you'd expect. Notice in my screenshots, the selectors include a long string of characters, followed by css class names. By including these long strings, you hone in on a more specific element on the page. While .banner-container is needed, it is not specific enough. Lastly, I'm just mentioning the obvious, but it never hurts to double check that your style sheet is being applied to the portal you desire. 

Keep me posted on your progress. Cheers!