Essential Grid Drop Down on Hover

[charlescthomson]

Hi Support,

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!

[ruenel]

Hello @charlescthomson,

Thanks for writing in!

Please edit your page. Separate the grid and the text into two separate rows. One row will contain the gird and the other row will be for the texts. In your row settings, set a higher z-index of at least 100 for the first row and then 50 for the second row.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.