How to override Parent Class in Service Portal

[reginabautista]

Hi guys

Would you know where I could locate the Parent Class in Service Portal? Reason being is I need to update the height of the graphic container of the main page and it seems that the CSS can be found in the Parent Class = hidden-xs. Appreciate any help. Thanks - Regina

[venkatiyer1 · Accepted solution]

Hi Regina,

hidden-xs class name is defined in bootstrap-3.2.0.css that comes with platform. To see what the parent class does, I would suggest using the inspect developer toolbar or looking into the bootstrap   library.

I did a quick scan of the source and found the following style

@media (max-width: 767px) {

.hidden-xs {

display: none !important;

}

}

So, i would suggest that you add a custom style with the same name in your theme and cascade with your specific style to override the default one.

[reginabautista]

Thanks Venkat. I've created a css (Service Portal -> CSS menu), then added this to the theme I am using for my portal but it didn't seem to work. I'm probably missing something here..Any ideas?

Service Portal CSS

Added in Theme's CSS Include:

[venkatiyer1]

Hi Regina,

In the first screenshot attached, please try after replacing the existing content in the CSS field   with

.hidden-xs {

height: 1000px !important;

}

You can retain the same name (hidden-xs) of CSS if you want or name it differently too.

[reginabautista]

Thanks Venkat! It worked!

I just had to modify the CSS to the following as it seems that hidden-xs is being used by the header as well:

.c7fec808037c3a200441a8ff1b399 {

      background-size: cover;

      background-image: url(553259964f63a200514627201310c7a9.iix);

      background-position: center center;

      height: 335px;

}