-
Posts
-
I have used the Timeline element > Horizontal in a website.
I have 4 problems:
1) How do I hide the milestone markers? The thin vertical lines. I tried to set the display: none, but have no clue on what class
2) How do I change the size of the circle behind the icon? Il like it smaller by 50%
3) Why is the horizontal line connecting the 5 milestones so thin and light grey? How do I change that to thicker?
4) Why are the arrow buttons (left and right) not working? On a smaller device like iPhone, the 5 milestones are displayed as only one element, and it should slide from left to right and back when clicking the arrow buttons.I have an example as JPG.
https://drive.google.com/open?id=1gHBOrbwmaSjmWnhU0jA8SJ58t40G3Md4Hey steenvreter,
you can achieve most of the tasks from your list with a little custom CSS.
1) There is supposed to be a title below the lines, in case of your content, it could look something like this:
https://www.evernote.com/l/AnYkJGJhRqdMfJr4Sg-cVupqtVLWGpAaBKo
To hide the lines you can use this custom CSS:
.avia-timeline-horizontal .av-milestone-date span:after{display:none !important;}2) Changing the size of the circle is not recommended,
there is quite a complex markup/stylesheet in place to ensure that the timeline works in all browsers and screen sizes.However, here is way how to make the circle look smaller by adding a border.
.main_color .avia-timeline .milestone_icon{ border: 10px solid #fff !important; }
This is just a starting point though, you might need to make further adjustments to the line-height and the different media-queries.3) Use this CSS selector to adjust the dashed line to your liking:
.avia-timeline-horizontal .av-milestone-icon-wrap:after{border: ....}4) This has been fixed in one of the previous releases. You are using the version 4.3, the current one is 4.4
Best regards,
Tina
- The topic ‘Avia builder- Timeline element problems in functionality and styling’ is closed to new replies.