More issues with iPad mobile menu

Hi guys

You were kind enough to help me solve a few issues that my client was having with the way her website displays on mobile devices. I thought everything got resolved, but I just got another message. The client says:

I’m still not happy with the way my website is displaying on mobile devices, take a look at the attached screen shot and you will see that the photo box is cut off, that is the border at the top cannot be seen as it can on a PC or laptop, and the facebook frames on the bottom right a weird an flowing off the display. Also if you look at each other page you will see that the heading is cut off. Also I sent you an email re the little box which appears on the ipone, you said it was the index, well I think it interferes with my name, I’m not liking it really.

I have uploaded a screen shot to:

http://www.yourmarriagecelebrant.com.au/error/

It is the very first image on that page.

This is the code I have in the quick css

#top.page .avia_textblock {background: #fff; padding: 20px 10px; border-radius: 4px; opacity:0.9;}

#top.page-id-44 .avia_ajax_form.avia-builder-el-3 {
background: rgba(255, 255, 255, 0.9);
padding: 10px;
}

.home #av_section_1 {
border: none !important;
}

@media only screen and (max-width: 1140px) {
.responsive .mobile_slide_out .logo {
display: block;
position: relative;
margin: 0 auto;
margin-bottom: 80px;
}

#advanced_menu_toggle, #advanced_menu_hide {
display: block;
position: absolute;
right: 40%;
top: 120px;
}
}
#advanced_menu_toggle, #advanced_menu_hide {
background-color: #ffffff;
color: #333333;
border-color: #e1e1e1;
}

@media only screen and (max-width: 1140px) {
.avia-menu.av-main-nav-wrap { display: none !important; }
}

@media only screen and (max-width: 767px) {
.html_header_top.html_header_topbar_active.html_header_sticky #top #main {
padding-top: 180px;
}
}

I would greatly appreciate your help.