响应式设计重叠的元素

Question

我正在研究的设计（除了桌面版本）一直在考虑480px x 720px分辨率，但它假设在较小的设备上显示正常。我对它上面的元素有很多问题，它们都是重叠的。

This is how it should look like

And this is how it looks on a smaller resolution

我现在主要担心的是重叠元素，我知道我可能需要使用媒体查询调整其他一些内容，但我不想继续，直到我解决这个问题：

• 正确定位菜单（当它移动并最终消失时）。
• 显示完整的蒙面图片。
• 防止按钮（图像）重叠。
• 防止文字离开div。

我相信我的css上有一个非常混乱的位置和显示元素混合/缺失。

相关代码：

@media only screen and (max-width: 500px) {
/*for the menu*/
.site-header {
display: block !important;
}
.sidebar-toggle { //the menu bar-icon properly
right: 390px !important; // I needed to do this because it was originally on the right side (im working on the Magnus theme in wordpress)
display: table;
position: absolute;
float:left;
}

/*for showing the masked image*/
.content-area {  //the div that contains the "A" masking the image
overflow: hidden; //without this scroll appears
}
h1.masking-a {
display: block;
position: relative;
}

/*for the text and image buttons*/
.square-footer { //the container div
position: fixed;
}
.square-footer-text {
position: fixed;
}
.square-footer-text p {
position: relative;
text-align: center !important;
}
.square-footer img {
position: fixed;
}
}