image overlay extending beyond image

Morning,
You have some custom css that is adding padding of 5px to the top of the image.

.links_page_video_image_styling .avia_image {
    padding-left: 0px!important;
    padding-right: 0px!important;
    padding-top: 5px!important;
    padding-bottom: 0px!important;
}

Remove that and the image and overlay will be flush.

You can just use

.links_page_video_image_styling .avia_image {
padding:0!important}

Then to keep the bigger spacing use

.links_page_video_image_styling .avia_image {
margin-bottom:5px;}

Hope that helps

TJ

Oops my bad…
remove the code that does the margin.

Extra spacing can be done using…

.avia-image-container.avia-align-center {
  margin:0 auto 20px;
}

That is a global change and not page specific

TJ

• This reply was modified 7 years, 4 months ago by tjswarbs78.

Ah yes.
We removed the top padding from the image so it has moved up 5px so we need to move the entire element down to compensate.

.avia-image-container.avia-align-center {
  margin:17px auto;
}

That will add appropriate margin to top to push it down.

OR

you can move the entire left element up.

.links_page_promo_box {
  margin-bottom:10px;
  margin-top:0;
}

that removes the top margin but we then need to double the bottom from 5px to 10px to keep the spacing

Give that a whirl :)

Thanks

TJ