
-
AuthorPosts
-
June 1, 2025 at 11:45 am #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
June 1, 2025 at 7:33 pm #1484943Hey 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:
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:
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; } }
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; } }
Best regards,
MikeJune 1, 2025 at 8:38 pm #1484944This reply has been marked as private.June 1, 2025 at 10:32 pm #1484946June 1, 2025 at 11:41 pm #1484947Hello Mike,
absolutely perfect :)))))
Thanks a lot!!!Many regards
rixiJune 1, 2025 at 11:57 pm #1484948Hi,
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 -
AuthorPosts
- The topic ‘Timeline mobile’ is closed to new replies.