Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • June 13, 2018 at 8:59 am #972113
    solBASE

    Hi
    I’d like to increase the size of the icon/picture on a timeline, but don’t see a way of doing it.

    Is this possible?

    Thanks, Stephen

    June 13, 2018 at 10:13 pm #972510
    Jordan Shannon

    Hey Stephen,

    Add this to quick css:

    .avia-timeline .milestone_icon{
height:150px!important;
width:150px!important;
line-height:150px!important;
}

    Best regards,
    Jordan Shannon

    June 13, 2018 at 10:32 pm #972520
    solBASE

    Hey Jordan – thanks, that worked..! Awesome.

    Got a weird thing going on though.

    When it’s the icon, the alignment with the text and connecting line is fine, no problems. But if I change it to a picture, the alignment goes off – everything is too high for the picture. I’ve tried with different sizes of picture, but with the same result.

    I’ve left the page with both icons and pictures, so you can see what I mean.

    Any ideas?

    Stephen

    June 13, 2018 at 11:40 pm #972545
    Jordan Shannon

    Hi,

    I’m having trouble seeing the issue. Can you screenshot what you mean?

    Best regards,
    Jordan Shannon

    June 14, 2018 at 9:12 am #972689
    solBASE

    Hi Jordan – no problem.

    I’ve screenshot them and put a couple of notes to help show the issue.

    I’d also noted that the alignment is off when I flip a tablet (a Surface Pro) into portrait. Also included.

    Appreciate your help!
    Stephen

    June 15, 2018 at 12:16 am #973035
    Jordan Shannon

    Hi,

    Apologies, but I can’t see a screen shot from the link you sent.

    Best regards,
    Jordan Shannon

    June 15, 2018 at 3:53 pm #973370
    solBASE

    Ok Jordan. Try this link.

    Thanks, Stephen

    June 17, 2018 at 6:31 pm #973975
    Victoria

    Hi Stephen,

    I could not load the screenshot, I am asked to log in. Can you please upload it again to https://imgur.com/ or Dropbox?

    Best regards,
    Victoria

    June 20, 2018 at 8:20 pm #975456
    solBASE

    Hi Victoria
    I’ve created another imgur post with them in it. Just checked it a couple of times and it works.

    I’ve put two screen grabs in, with some notation from me to highlight the issue – one landscape and the other portrait.

    Thanks, Stephen

    June 22, 2018 at 5:38 am #976091
    Ismael

    Hi,

    Thanks for the screenshot.

    You can actually move the milestone date container closer to the center but you’ll end up with a much shorter indicator on the milestones without images.

    .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date {
    left: -10px;
}

.avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-odd .av-milestone-date {
    right: -10px;
}

    Best regards,
    Ismael

    June 22, 2018 at 2:48 pm #976370
    solBASE

    HI Ismael
    On the portrait view, it’s already overlapping. Wouldn’t moving it closer, just make it worse?

    Thanks, Stephen

    June 23, 2018 at 10:33 am #976869
    Nikko

    Hi Stephen,

    I tried checking on the link you gave (in private content) but it returns:

    Nothing Found
Sorry, the post you are looking for is not available. Maybe you want to perform a search?

    Can you give us the links for the pages on those 2 screenshots? so we can try to give you a more accurate css code.

    Best regards,
    Nikko

    June 25, 2018 at 1:30 am #977268
    solBASE

    3rd time lucky!!

    I’ve given you a dropbox link

    Thanks, Stephen

    June 26, 2018 at 2:34 am #977742
    Ismael

    Hi,

    Thanks for the update.

    I was referring to the style of the indicator (line which points to the time) on desktop view. That css code should move them closer to the center. Did you remove the page? It doesn’t exist anymore.

    Best regards,
    Ismael

    June 26, 2018 at 8:45 am #977818
    solBASE

    Having a wee issue with my host. Will be back up today. Sods law that it went down on the day you looked!! Argh.

    Will let you know asap.

    Thanks, Stephen

    June 27, 2018 at 9:07 am #978302
    Nikko

    Hi solBASE,

    Okay, just post back as soon as it’s up.
    We’ll leave this thread open.

    Best regards,
    Nikko

    June 27, 2018 at 10:25 pm #978587
    solBASE

    Hi there – host fixed it.

    The link is below and the screen shots still apply.

    Thanks, Stephen

    June 28, 2018 at 1:45 am #978653
    Ismael

    Hi,

    Thanks for the update.

    Replace the recent modifications with the following css codes so that it won’t affect the mobile layout.

    @media only screen and (min-width: 768px) {
.avia-timeline .milestone_icon {
    height: 150px!important;
    width: 150px!important;
    line-height: 150px!important;
}

.avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date {
    left: -10px;
}

.avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-odd .av-milestone-date {
    right: -10px;
}
}

    We just wrapped the same css codes inside a css media query.

    Best regards,
    Ismael

    June 29, 2018 at 10:47 am #979253
    solBASE

    Hi Ismael
    Thanks for this.

    Put the code in, but still the same. Worth pointing out though that the issue isn’t on a mobile. The screenshots are from my laptop and are what I see (landscape one) on my main PC.

    When it’s an icon on the timeline everything aligns perfectly, when it’s a photo the alignment goes off.

    Looking forward to hearing from you.

    Thanks, Stephen

    July 2, 2018 at 12:54 am #979918
    Ismael

    Hi,

    I just noticed the vertical alignment of the indicators. Please use this one instead.

    #av_section_3 .avia-timeline li:nth-child(3) .av-milestone-date, #av_section_3 .avia-timeline li:nth-child(2) .av-milestone-date, #av_section_3 .avia-timeline li:nth-child(1) .av-milestone-date {
    top: 20px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.