Elements overlapping on responsive design - css

Question

The design I'm working on (apart from the desktop version) has been thinking for a 480px x 720px resolution, but it suppose to show ok on smaller devices. I'm having a lot of problems with the elements on it, they are all overlapping.
This is how it should look like
And this is how it looks on a smaller resolution
My main concern right now is with the overlapping elements, I know I may need to adjust some other things using media queries, but I don't want to continue until I fix this:
correctly position the menu (as it moves and finally disappear).
Show the full masked image.
Prevent buttons (images) from overlapping.
Prevent text from leaving div.
As I believe that I have a very confusing mix/absence of position and display elements on my css.
Relevant code:
#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;
}
}