Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 11, 2019 at 12:04 am #1077157
    diefleischerei

    Hi. Please help me with some css for the Title Text under an image in a mansory grid.

    It looks like this at the moment: https://imgur.com/a/T7520V1 a perfect 1:1 ratio image

    When i activate the Title Text in the Mansory option it looks like this: https://imgur.com/a/JqtX4uJ the perfect 1:1 ratio image is cut by the text overlay.

    i want to have a perfect 1:1 ratio image and the title text under the image. like this: https://imgur.com/a/R3ASlXE here i have a perfect 1:1 image and the text below (this is photoshop – please help me with the code).

    Thank you very very much, greetings from vienna, Alex

    March 14, 2019 at 6:58 pm #1078788
    Basilis

    Hey diefleischerei,

    The ration is the same, the caption is coming up of the image, so it does not resize the image :)

    Best regards,
    Basilis

    March 14, 2019 at 8:49 pm #1078861
    diefleischerei

    OK, i know this. thank you. how can i move the caption down so i see the full 1:1 image. Greetings, Alex

    March 20, 2019 at 2:25 am #1080603
    Ismael

    Hi,

    You can adjust the bottom padding of the masonry items to adjust their height.

    .av-masonry-entry.post {
    padding-bottom: 78px;
}

    Adjust the value until you get the expected aspect ratio.

    Best regards,
    Ismael

    March 20, 2019 at 11:26 am #1080770
    diefleischerei

    Hi Ismael, this works pretty welll. Thank you.

    March 21, 2019 at 4:16 pm #1081454
    Ismael

    Hi,

    But thei image is scaled up i

    Scaling them up is necessary in order to keep the images’ aspect ratio. We can make the image inherit the size of the masonry container but they will get distorted.

    .av-masonry-image-container {
    background-size: 100%;
}

    Use this css code to change the background of the content container.

    .main_color .container .av-inner-masonry-content, #top .main_color .container .av-masonry-load-more, #top .main_color .container .av-masonry-sort, .main_color .container .av-masonry-entry .avia-arrow {
    background-color: red;
}

    Best regards,
    Ismael

    March 21, 2019 at 8:43 pm #1081554
    diefleischerei

    Ok thank you Ismael. But the uploaded images have an 1:1 ratio, so no upscaling is needed???

    Greetings and thanks for the code, all the best, Alex

    March 22, 2019 at 2:31 pm #1081846
    Ismael

    Hi,

    I see. Yes, that’s right. The image is not fully visible because the content container is covering parts of it. This css code should move the content container below the image.

    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, .av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
    position: absolute;
    bottom: -78px;
}

.av-large-gap.av-fixed-size .av-masonry-entry.post .av-inner-masonry {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 15px;
    bottom: 15px;
    overflow: visible !important;
}

.av-masonry-entry.post {
    padding-bottom: 78px;
    margin-bottom: 78px;
}

    Best regards,
    Ismael

    March 22, 2019 at 2:35 pm #1081847
    diefleischerei

    OK, thank you very much. should i replace or add the code you wrote before? thanks, alex

    March 22, 2019 at 2:38 pm #1081849
    diefleischerei

    I added the code. it looks good but now it is not a 1:1 ratio :) Thanks for your time Ismael :) Greetings, Alex

    March 25, 2019 at 4:12 am #1082490
    Ismael

    Hi,

    Alright. You can adjust the values if necessary. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Mansory Title Text under Image’ is closed to new replies.