Support » Plugin: Animentor – Lottie & Bodymovin for Elementor » Can’t Center Justify JSON in Elementor!

  • studioeighteenfifty

    (@studioeighteenfifty)


    Hello! Having a bit of frustration with the Animentor plug-in in regard to justifying the JSON animation. Every other function seems to work just fine up until we need to center justify the file, and right when I do the graphic is pushed down to the bottom of the page, barely seen, outside of its own bounding box. I thought this might be a file issue, but the graphic is centered in a square format so there is no reason for the center justification to be reading it as needing to place it as it is doing. Playback looks great, scroll/mouse triggers are performing perfectly – I just need it to be in the center of the page without resorting to an “absolute” position setting, which isn’t ideal for a responsive site. Help is greatly appreciated!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author over-engineer

    (@overengineer)

    Hey @studioeighteenfifty,

    I’m sorry you’re experiencing this issue.

    If possible, could you please provide a link for an additional page where the “Lottie” widget isn’t absolute positioned?

    studioeighteenfifty

    (@studioeighteenfifty)

    Plugin Author over-engineer

    (@overengineer)

    Thanks for following up, I really appreciate it.

    I’ve opened an issue on the plugin’s GitHub repository (#21), so you can follow its progress there.

    I might have a solution, though I haven’t tested it yet.

    Basically, modifying the widgets/lottie-widget.php file, lines 137-140:

    'selectors' => array(
      '{{WRAPPER}} .elementor-widget-container'   => 'display: flex; justify-content: {{VALUE}};',
      '{{WRAPPER}} .elementor-widget-container a' => 'display: flex; justify-content: {{VALUE}};'
    ),
    

    to

    'selectors' => array(
      '{{WRAPPER}} .elementor-widget-container'                            => 'text-align: {{VALUE}};',
      '{{WRAPPER}} .elementor-widget-container a'                          => 'text-align: {{VALUE}};',
      '{{WRAPPER}} .elementor-widget-container .animentor-lottie-widget'   => 'display: inline-block;',
      '{{WRAPPER}} .elementor-widget-container a .animentor-lottie-widget' => 'display: inline-block;'
    ),
    

    Unfortunately, I might not have time to test it and release an update for a while, so if you don’t want to wait you could try to manually modify the file (make sure you keep a copy of the original file, in case it’s not working as expected).

    I’ve posted a GitHub gist with the updated file.

    If you do test it, let me know if it works (or if it broke it even more 😛).

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