How to add Padding to top of picture in SP so it doesn't get covered

[Wendy Peterson]

I am building out our employee center for hr - they gave me some images they want to lose but they keep getting cut off any ideas. See below the first is our portal see how their heads get cut off. I have it as an image in the first container and that menu keeps over laying it.

[Community Alums · Accepted solution]

Hi @Wendy Peterson ,

With css you can condition how the image is displayed based on screen size.

For example:

For Padding : you can use something like this:

.navbar-brand{

max-height : 60 px;

padding : 0;

Padding-top: 0.5 rem;

padding-bottom: 0.5rem;

or another example:

@media (max-width: 1440px){
.navbar-brand img, .navbar-brand span {
margin-left: $sp-logo-margin-x;
margin-right: $sp-logo-margin-x;
margin-top: $sp-logo-margin-y;
margin-bottom: $sp-logo-margin-y;
display: block;
max-height: $sp-logo-max-height;
max-width: $sp-logo-max-width;
position: relative;
top: 70%;
overflow: hidden;
right: -20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}

This would take effect only when the max width of the screen is 1440px.
You could have multiple different ones for different sizes.

Mark my answer correct & Helpful, if Applicable.

Thanks,

Sandeep

[Wendy Peterson]

Thanks where would I add that? I am not seeing any place on the container to add CSS

[Community Alums]

Hi @Wendy Peterson ,

Portal > Theme

for you it would be EC theme mostly.

Mark my answer correct & Helpful, if Applicable.

Thanks,

Sandeep