Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1365548

    Hi Enfold team,

    I´m using a timelline on my site with images instead of icons for the milestones.

    I tried to bring each image (=milestone) to a width of 100% on mobile devices (<767px) with the following css:.

    @media only screen and (max-width: 767px) {
    .avia-timeline .milestone_icon {
    width: 100% !important;
    height: auto !important;
    }
    }

    This works great for the width, but the height is incomplete (I tried to keep the proportions of the image with “auto” for height).
    Unfortunately it doesn´t work, please see screenshot.

    Please let me know how to keep the proportions of each image/milestone on all screen sizes.

    Thank you very much in advance.

    Best regards,
    fkm

    #1365644

    Hey fkm,

    Thank you for the inquiry.

    Try to this css code to adjust the height of the timeline images on smaller screens.

    @media only screen and (max-width: 767px) {
        .av-no-preview .avia-timeline .milestone_icon.milestone-icon-hasborder .milestone_inner {
            line-height: 300px;
        }
    }

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1365656

    Hey Ismael,

    thank you very much for your reply and the css code – it works well.

    But actually I´d like to keep the original proportions of the images.
    Is there a way to get the width-to-height ratio of the original images used for the milestones on every device/view?

    Thanks a lot in advance for another reply.

    Best regards,
    fkm

    #1365695

    Hi fkm,

    Can you try changing this part of Ismael’s code:

    line-height: 300px;

    to:

    aspect-ratio: 15/9;

    Let us know if it helps.

    Best regards,
    Nikko

    #1365714

    Hi Nikko,

    it helps, works great – thank you very much.

    In addition, please let me know how to apply the same aspect ratio to the milestones in general/for other devices (computer, tablet) as well.

    Thanks a lot in advance,
    fkm

    #1365718

    Hi fkm,

    Just replace this code:

    @media only screen and (max-width: 767px) {
        .av-no-preview .avia-timeline .milestone_icon.milestone-icon-hasborder .milestone_inner {
            aspect-ratio: 15/9;
        }
    }

    with: (and that should apply on all devices)

    .av-no-preview .avia-timeline .milestone_icon.milestone-icon-hasborder .milestone_inner {
        aspect-ratio: 15/9;
    }

    Hope this helps.

    Best regards,
    Nikko

    #1365726

    Hi Nikko,

    that was also my first intention and I tried but it didn´t seem to work.

    With the following css code I could define the pixel size of the milestone images (but not the aspect ratio that I´d like to get).
    Without the following css code the images are shown as small squares.

    .avia-timeline .milestone_icon {
    height: 177px !important;
    width: 320px !important;
    }

    Is there a simple way to define the number of milestones per slide and their size or width with uniform aspect ratio for the different devices (computer, tablets > portrait and landscape format)?

    Thanks a lot for another reply in advance.

    Best regards,
    fkm

    #1366052

    Hi fkm,

    Try to remove all the codes we gave and just replace it with:

    #top .avia-timeline .milestone_icon {
        height: 177px;
        width: 320px;
        aspect-ratio: 320/177;
    }

    Basically just set height and width.
    For aspect ratio the value should be: width/height.

    Best regards,
    Nikko

    #1366097

    Hi Nikko,

    thank you very much for your reply.

    I was just trying out several options with the aspect-ratio in this css code but unfortunatelly none of them seem to be working on my end.
    I also was probably wrong earlier in this topic when I said it worked – sorry!

    Please let me know if there´s any other way to get a consistent aspect ratio of the milestone icons for all devices?

    Thank you very much in advance.

    Best regards,
    fkm

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.