Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 14, 2020 at 6:03 pm #1230356
    Hamalaga

    Hello,

    the bahavior of this element is buggy. When I zoom out, some lines disappear.
    But more important is the mobile version, which does not display correctly.
    On the first link the elements are not switching correctly on mobile, sometimes even missing content.

    On the second link there are 2 versions of the same time line element with identical content. The first one, in color section, does not display the text correctly in mobile version. The second one does.
    We want the text to behave like the second one (the one without background image).

    July 16, 2020 at 11:39 am #1230882
    Ismael

    Hey Hamalaga,

    Thank you for the inquiry.

    The timeline element in the “fuer-studierende” is not working properly because of a script error.

    Uncaught TypeError: can't access property "prev_url", containerData is undefined
    request https://site.com/wp-content/plugins/the-events-calendar/src/resources/js/views/manager.js?ver=5.1.4:422
    onPopState https://site.com/wp-content/plugins/the-events-calendar/src/resources/js/views/manager.js?ver=5.1.4:396
    jQuery 2

    It’s from The Events Calendar plugin.

    To adjust the color of the timeline content, try to use this css code.

    .av-milestone-content {
	color: #ffffff !important;
}

    Best regards,
    Ismael

    August 5, 2020 at 4:41 pm #1235462
    Hamalaga

    Thanks for the reply.

    I deactivated the plugin and yet it does not display properly on mobile

    August 6, 2020 at 11:44 am #1235653
    Victoria

    Hi Hamalaga,

    Best regards,
    Victoria

    August 17, 2020 at 3:45 pm #1238509
    Hamalaga

    Hello,
    I have been in contact with the plugin´s support and I was able to fix that error. Nonetheless it was not the cause of the problem.

    I have played a little with slideshow.css in enfold\config-templatebuilder\avia-shortcodes\slideshow but it didnt help.
    Maybe you can help me? I redid the changes.

    best regards

    August 23, 2020 at 6:28 pm #1240181
    Mike

    Hi,
    Sorry for the late reply, if I understand your issue correctly, on the page linked in the Private Content area, in the section “Projektablauf” the timeline is not competing it’s animation for mobile so the icons are showing small and transparent.
    Please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.avia_transform .avia-timeline-animate.avia_start_animation .milestone_icon,
.avia_transform .avia-timeline-animate.avia_start_animation .av-milestone-icon-wrap:after{
    -webkit-animation: avia_appear 1s !important;
    animation: avia_appear 1s !important;
    animation-fill-mode: forwards !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 27, 2020 at 7:32 pm #1241300
    Hamalaga

    I made a video to show you my issue. The link from above changed too.

    August 29, 2020 at 9:53 pm #1241852
    Mike

    Hi,
    Thank you for the video, I see that you are using “WP-Super-Cache” please try disabling your cache & minifying plugins and check again.
    I tested the timeline on my localhost and it works correctly on mobile, I believe this is related to your cache plugin or a lazy load feature in a plugin.

    Best regards,
    Mike

    August 29, 2020 at 10:17 pm #1241855
    Hamalaga

    Thanks for your response.
    I deactivated Autoptimize and WP Super Cache. I also deactivated lazy load and css/js minifying in Enfold Options.
    I cleaned my brwoser cache and also tried a new browser without success. : (

    I added a new time line element at the bottom of the page without any customizations and yet it doesnt work properly.

    August 30, 2020 at 3:00 am #1241866
    Mike

    Hi,
    Thank you for trying that, when I check the new page with Chrome dev tools and when I check on an Android device all three timelines are working. Please check again, perhaps you also have server cache?
    Are you checking with an iPhone, can you also check with an Android?

    Best regards,
    Mike

    August 30, 2020 at 11:55 pm #1242016
    Hamalaga

    Hello guys,

    the problem was caused by this code snipped:

    @media only screen and (max-width: 767px) {
    .avia_transform .avia-timeline-animate.avia_start_animation .milestone_icon,
    .avia_transform .avia-timeline-animate.avia_start_animation .av-milestone-icon-wrap:after{
    -webkit-animation: avia_appear 1s !important;
    animation: avia_appear 1s !important;
    animation-fill-mode: forwards !important;
    }
    }

    I am uncertain, how it got to my custom css.

    Anyways, thanks for your help and patience!

    August 31, 2020 at 1:36 am #1242024
    Mike

    Hi,
    Glad to hear you have been able to sort this out, we will close this now. Thank you for using Enfold, and Thank you for your patience.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Time line in colorsection is not responsive’ is closed to new replies.