Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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
    tim

    #1484274

    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

    #1484289

    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

    #1484316

    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

    #1484335

    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

    #1484425

    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

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