
Tagged: Timeline with bugs?
-
AuthorPosts
-
May 14, 2025 at 4:36 pm #1484245
Hi, when using the timeline content-element, I have the problem that in smaller viewports the date from the left side is not visible and code-instructor shows me a “display:none”. Desktop-view is fine, not so on smartphoneas and tablets (smaller 989px)
@media only screen and (max-width: 989px) {
.av-no-preview .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date {
padding: 33px 0 30px 50px;
display: none;
}
}
I post the url in the private area. What to do?
Thanks
timMay 15, 2025 at 6:50 am #1484274Hey slikslok,
Thank you for the inquiry.
You can set the display property to block, but the placement of the date would be incorrect. If you really need the date to display on mobile view, we recommend changing the Styling > General Styling > Milestone Placement to Left or Right, instead of Alternate.
Best regards,
IsmaelMay 15, 2025 at 9:03 am #1484289Hi Ismael,
please invest some more support-motivation. I’ll post you a link in the private area from another project where it works perfectly, with the same style-setting! So it must be some kind of bug in the newest enfold-theme or something else.
Thanks for your help.
TimMay 16, 2025 at 6:26 am #1484316Hi,
Looks like the old version duplicated the milestone date which is no longer the case in the latest version. You can try this script in your functions.php file to copy the structure of the “odd” items for the “even” timeline items.
add_action( 'wp_footer', 'av_custom_script_mod', 100 ); function av_custom_script_mod() { ?> <script> document.addEventListener("DOMContentLoaded", function () { const avSwapMilestoneElements = () => { const isSmallScreen = window.innerWidth < 989; const milestones = document.querySelectorAll(".av-milestone"); milestones.forEach((milestone, index) => { const isEven = milestone.classList.contains("av-milestone-even"); if (!isEven) return; const date = milestone.querySelector(".av-milestone-date"); const content = milestone.querySelector(".av-milestone-content-wrap"); const icon = milestone.querySelector(".av-milestone-icon-wrap"); if (!date || !content || !icon) return; if (isSmallScreen) { milestone.innerHTML = ""; milestone.appendChild(date); milestone.appendChild(content); milestone.appendChild(icon); } else { milestone.innerHTML = ""; milestone.appendChild(content); milestone.appendChild(icon); milestone.appendChild(date); } }); }; avSwapMilestoneElements(); window.addEventListener("resize", avSwapMilestoneElements); }); </script> <?php }
You may also need to add this css.
@media only screen and (max-width: 989px) { /* Add your Mobile Styles here */ .avia-timeline .milestone_icon i.milestone-char.avia-svg-icon svg:first-child { margin-top: 18px; } }
Best regards,
IsmaelMay 16, 2025 at 10:06 am #1484335Hi Ismael,
worked perfectly, thanks. But for what reason the css? The Icons are place perfect, using the css cause a desing-error…
“Looks like the old version duplicated the milestone date which is no longer the case in the latest version.”
For what reason? And are you fising this in a the next update? I used this content-element quite often in diffferent projects…
Thanks
TimMay 19, 2025 at 9:07 am #1484425 -
AuthorPosts
- You must be logged in to reply to this topic.