Problem with timeline

Hey Alexandre,
I assume that your issue is that under 990px the timeline titles only show for every other one, to correct add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function correct_timeline_titles_for_mobile() { ?>
  <script>
document.addEventListener('DOMContentLoaded', () => {
  // Check if there are any .av-milestone-even elements
  const milestones = document.querySelectorAll('.av-milestone-even');
  if (milestones.length === 0) return; // Exit if no milestones found

  // Define the media query for screens smaller than 989px
  const mediaQuery = window.matchMedia('(max-width: 989px)');

  // Function to reorder elements
  const reorderMilestones = () => {
    if (mediaQuery.matches) {
      milestones.forEach(milestone => {
        const date = milestone.querySelector('.av-milestone-date');
        const icon = milestone.querySelector('.av-milestone-icon-wrap');
        const content = milestone.querySelector('.av-milestone-content-wrap');

        // Ensure all elements exist before reordering
        if (date && icon && content) {
          milestone.innerHTML = '';
          milestone.appendChild(date);
          milestone.appendChild(icon);
          milestone.appendChild(content);
        }
      });
    }
  };

  // Run initially
  reorderMilestones();

  // Add listener for window resize
  mediaQuery.addEventListener('change', reorderMilestones);
});
</script>
  <?php
}
add_action( 'wp_footer', 'correct_timeline_titles_for_mobile', 99 );

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike