animation not showing when height and width are set to 100% in ea

This is because you haven’t defined a max-width or height, as far as the animation is concerned there is no room to work with, for full responsiveness you need to write some code, also you should use CSS for setting your margin.

Also a good idea to nest the edge animation inside another div, for instance:

HTML:
<div class=”edgewrap”>
<?php the_field(‘edge_animation’, $page_id); ?>
</div>

CSS:
.edgewrap {
position: relative;
width: 100%;
height: 100%;
max-height: 419px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

In the above example I am using a custom field to hold the edge animation but you get the idea.

On this line:
<?php the_field(edge_animation id=”20″, $page_id); ?>

The field ID needs to be the field in which you put the edge shortcode.

I use a plugin called Advanced Custom Fields where you can create your own fields for pages in wordpress. That line of code is setting a container around the custom field, so If you are just typing it into the default wordpress WYSIWYG editor it won’t work.