Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #813714

    hi there,

    please have a look at http://thymeforachef.com.au/links/ as well as screenshot below:

    View post on imgur.com

    You can see that the image overlay is extending beyond the image by about 4px or so. Could you advise how i can change it to be flush with the image?

    Thanks

    #813746

    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

    #813757

    hi tj,

    now i got the overlay extending at the bottom of the image. also, the top image in the right hand column is now not aligned with the left column. Any other suggestions?

    Thanks

    #813761

    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 6 years, 9 months ago by tjswarbs78.
    #813765

    ok, the overlay is now flush. but the 2 columns are not aligned. any idea?

    thx

    #813767

    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

    #813768

    thanks, that worked. you can close this one.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘image overlay extending beyond image’ is closed to new replies.