Theme is not mobile responsive?

Try this:

(1) Remove the height declaration for header#masthead.

(2) Change the margin declaration for #main to margin: 0 auto.

Hello thanks for responding so quickly. I will try that in a bit. However, I just viewed my site and I see a black box behind the slider. Is there anyway to delete the black box?

Hello there again. The problem I have now is when I view the website on mobile devices such as iPad mini, iPad air, Note II, etc….there is a HUGE gap between the header (revolution slider) and my home page where the pictures are on. There is a big black box between the slider/header and the main page. I do not know where to go to edit to fix this. Do I change some measurements in the Stylesheet (style.css)? Could you advise?
Thanks. Site is https://www.piixdot.com

Ok I seemed to have fixed the header/slider issue on mobile devices. However, I no longer see the menus on my home page…It looks like the slider maybe in front of the menus. Below is what I have. What can I do so that I can get my menus back on my home page. Site is https://www.piixdot.com. Thank you.

/* =Header
———————————————– */

header#masthead {
position: relative;
width: 100%;
height: 0 auto;
background: #000;
}
hgroup {
position: background;
height: 100%;
width: 100%;
display: table;
}
hgroup div.site-text {
display: table-cell;
vertical-align: middle;
text-align:center;
}
hgroup h1.site-title {
font-size: 8em;
text-transform: uppercase;
font-weight: bold;
line-height: 1.2;
text-shadow: 7px 7px 0 rgba(0,0,0,0.5);
padding-top: 40px;
}
hgroup h1.site-title a {
text-decoration: none;
opacity: 0.8;
color: #fff;
}
hgroup h1.site-title a:hover {
opacity: 1;
}
hgroup h2.site-description {
color: #ccc;
}

You haven’t done the second step that I suggested, which was designed to avoid exactly that problem.

Change:

#main {
   margin: -3.05em auto;
}

to:

#main {
   margin: 0 auto;
}

Hello, I have changed it to what you mentioned above. I input your info in style.css, below is what it looks like now. Still nothing ??

/* =Content
———————————————– */

#main {
max-width: 1075px;
margin: 0 auto;
clear: both;
background: rgba(255,255,255,0.8);
padding: 0 3% 2%;
overflow: hidden;
position: relative;
z-index: 1;

Resolved