![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 13, 2018 at 8:59 am #972113
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 #972510Hey Stephen,
Add this to quick css:
.avia-timeline .milestone_icon{ height:150px!important; width:150px!important; line-height:150px!important; }
Best regards,
Jordan ShannonJune 13, 2018 at 10:32 pm #972520Hey 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 #972545Hi,
I’m having trouble seeing the issue. Can you screenshot what you mean?
Best regards,
Jordan ShannonJune 14, 2018 at 9:12 am #972689Hi 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!
StephenJune 15, 2018 at 12:16 am #973035Hi,
Apologies, but I can’t see a screen shot from the link you sent.
Best regards,
Jordan ShannonJune 15, 2018 at 3:53 pm #973370Ok Jordan. Try this link.
Thanks, Stephen
June 17, 2018 at 6:31 pm #973975Hi 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,
VictoriaJune 20, 2018 at 8:20 pm #975456Hi 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 #976091Hi,
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,
IsmaelJune 22, 2018 at 2:48 pm #976370HI 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 #976869Hi 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,
NikkoJune 25, 2018 at 1:30 am #9772683rd time lucky!!
I’ve given you a dropbox link
Thanks, Stephen
June 26, 2018 at 2:34 am #977742Hi,
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,
IsmaelJune 26, 2018 at 8:45 am #977818Having 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 #978302Hi solBASE,
Okay, just post back as soon as it’s up.
We’ll leave this thread open.Best regards,
NikkoJune 27, 2018 at 10:25 pm #978587Hi there – host fixed it.
The link is below and the screen shots still apply.
Thanks, Stephen
June 28, 2018 at 1:45 am #978653Hi,
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,
IsmaelJune 29, 2018 at 10:47 am #979253Hi 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 #979918Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.