Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1484924

    Hi, i used that great timeline, buton mobile it doesn`t look so good. Is there a way that i can read everything better?
    Often there are just 2 or 3 words in a row. That would be perfect!

    Many regards rixi

    #1484943

    Hey rixi,
    I notice that on mobile not all of the dates show, only every other one, so to correct try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
    use wpcode php snippet and activate
    and ensure that it is activated, then add the bellow code and save.

    function custom_timeline_script_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);
            }
          });
        }
      };
    
      reorderMilestones();
        mediaQuery.addEventListener('change', reorderMilestones);
    });
    </script>
      <?php
    }
    add_action( 'wp_footer', 'custom_timeline_script_for_mobile', 99 );

    Then I notice that one of your content boxes has too much padding for the list:
    Screen Shot 2025 06 01 at 1.16.43 PM
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 989px) {
        .av-no-preview ul.avia-timeline-vertical .av-milestone-content li {
            padding: 0;
        }
    }

    Screen Shot 2025 06 01 at 1.21.45 PM
    Changing the content padding and font size of the title and content may also help:

    @media only screen and (max-width: 989px) {
        .avia-timeline-boxshadow .av-milestone-contentbox {
        padding: 1em;
        }
        #top #wrap_all .all_colors h4.av-milestone-title {
        font-size: 20px;
        }
        .av-milestone-content p,
        .av-milestone-content li {
        font-size: 12px;
        line-height: 18px;
        }
    }

    Screen Shot 2025 06 01 at 1.32.50 PM
    Try this and adjust to suit.

    Best regards,
    Mike

    #1484944
    This reply has been marked as private.
    #1484946

    Hi,
    Ok, I added the code, clear your browser cache and check.

    Best regards,
    Mike

    #1484947

    Hello Mike,
    absolutely perfect :)))))
    Thanks a lot!!!

    Many regards
    rixi

    #1484948

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Timeline mobile’ is closed to new replies.