I’m using Essential Grid to showcase products. The skin I’m using has a “Drop Zone” below the image space where I’ve put text content. I’m running into an issue where the “Drop Zone” (on mouse hover) drops into the next section of the page and some content (headline element) from the section below overlaps with the “Drop Zone” content and some content (text element) from the section appears behind the “Drop Zone” content.
I’ve placed a 300px gap element in the section that the Essential Grid shortcode is placed for the time being. However, I don’t want to have a gap between sections. I’d like the “Drop Zone” content to cover the content in the next section.
Is there a workaround for this?
You can see an example of this issue here: http://www.cefoodexperience.ca/cakes-and-cupcakes/
If you look at the second essential grid element on the page (below the heading: “Themed Cakes”
and hover over the last grid image you can see that the Header in the next section on the page overlaps with the “Drop Zone” content (when viewed on a medium screen device such as a laptop).
Thanks for the help!