Timeline (milestones): keep proportions of icons (images) on mobile view

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

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

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

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

H Nikko,

no need to apologize – thank you very much for your response.

I think I couldn’t make my request clear with using sample milestone images of different sizes and ambiguous descriptions.
That’s why I now only use one example image (in one size) for all milestones and made new screenshots (photomontages) for you to watch:

The original image now has an resolution of 1280 x 720 px (= aspect ratio 16:9).
Please see screenshot: milestone-image_1280x720px.jpg
I´d like to keep this aspect ratio for all devices so that the image can always be seen as a whole:
On large screens with a width of about 320 pixels and on smartphones (portrait format) over the full width (100%).
Please see screenshots: timelline-milestones_desktop-view.jpg + milestone-image_mobile-view.jpg

Please let me know how this can be done.

Thanks a lot in advance.

Best regards,
fkm

Hi Nikko,

I was able to make all adjustments as desired (and even better) with this CSS code – thank you so much.

To make the milestones a bit smaller and thereby get more dashed lines (=more timeline charakter), I changed the values ​​as follows and it worked fine:

#top .avia-timeline .milestone_icon {
    width: 80%;
    padding-top: 44.45%;
}

However, a thin line out of the next milestone can now be seen on the right side of the page on the desktop view (not on other devices).
Please see page or screenshot.
Please let me know how to fix this.

Thank you very much in advance.

Best regards,
fkm

Hi Nikko,

thank you very much – that worked fine, it looks just great.

Please feel free to close this topic as successfully completed.

Best regards,
fkm