Can’t Center Justify JSON in Elementor!

studioeighteenfifty
(@studioeighteenfifty)

4 years, 9 months ago

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 overengineer
(@overengineer)

4 years, 9 months ago

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?

Thread Starter studioeighteenfifty
(@studioeighteenfifty)

4 years, 9 months ago

Definitely!

http://studioeighteenfifty.com/chris-json-test/
Plugin Author overengineer
(@overengineer)

4 years, 9 months ago
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)

The topic ‘Can’t Center Justify JSON in Elementor!’ is closed to new replies.

Tags