Layering issue

Good day. I’m hoping someone can help me with an issue I’ve encountered. I’m using X-Pro.

I have attached a screen capture below from a Samsung S-9 Mobile phone in Portrait view. There is a “Submit” button (white box with yellow border) that you can see being cropped at the top by the Social icons above it. This element does not belong here, but belongs much higher; above the “Follow Us” copy. I have positioned it here to demonstrate the problem I am having.

This “Submit” button is an X-Pro Content Area element with a Short code entered to display the button. It appears just fine on a computer screen and even on mobile in Landscape view; the layering only seems wrong in Portrait view. I’m not sure how this is even possible, but that’s what is in fact happening.

I’m using a Media Querie to move this element into position for Mobile displays and cannot get it to appear on top. I have applied the Position Property and Z-index to all involved elements, but no matter what I do it appears underneath everything that is placed above the footer.

If anyone has any thoughts, I’d be most grateful. I’ll buy the next round if someone has the solution!