Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 14, 2025 at 4:36 pm #1484245
    slikslok

    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
    tim

    May 15, 2025 at 6:50 am #1484274
    Ismael

    Hey 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,
    Ismael

    May 15, 2025 at 9:03 am #1484289
    slikslok

    Hi 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.
    Tim

    May 16, 2025 at 6:26 am #1484316
    Ismael

    Hi,

    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,
    Ismael

    May 16, 2025 at 10:06 am #1484335
    slikslok

    Hi 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
    Tim

    May 19, 2025 at 9:07 am #1484425
    Ismael

    Hi,

    You can remove the css if it’s causing issues. This setup will likely remain as-is, since duplicating the content may not be ideal. Please keep the script if you need to use alternating timeline.

    Best regards,
    Ismael

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