Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 28, 2018 at 8:18 pm #979040
    cardiopulmonarycorp

    Hi my client wants to have image caption overlays that on some pages are centered and on others are flush left. I was not able to make it align left using css but was able to make the text flush left using:

    .av-image-caption-overlay {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
    color: #FFF;
    text-align: left;
    }

    .av-image-caption-overlay-center:hover{
    color:#fff!important;
    text-align: left;
    }

    The problem being that some image captions have to be centered on other pages
    is this possible
    thanks in advance for all help and suggestions

    June 28, 2018 at 9:27 pm #979075
    Jordan Shannon

    Hey cardiopulmonarycorp,

    You would need to target the specific pages id class to achieve this effect. This can be found via the browser inspector.

    Best regards,
    Jordan Shannon

    June 28, 2018 at 9:55 pm #979096
    cardiopulmonarycorp

    Hi Jordon ty for the fast reply i can find the page id class – but how do i write the code to make this work…
    Sorry i know enough css coding to be dangerous – :)

    June 28, 2018 at 10:02 pm #979102
    Jordan Shannon

    Hi,

    You would add it to the front of the code you already have:

    .page_id .av-image-caption-overlay {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
color: #FFF;
text-align: left;
}

.page_id .av-image-caption-overlay-center:hover{
color:#fff!important;
text-align: left;
}

    You would need to adjust the id based on if you want that particular page to be left aligned or centered.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Image Caption Alignment need: centered on some pages – left align on others’ is closed to new replies.