Mobile menu and slider images not working correctly

Thank you for the response

The slider was not resizing and was cursing off most of the image. I have changed the crop of the image and have added the below code in the style.css in my child theme:

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background-color: transparent;
position: absolute!important;
}}
/* CAPTION HEADING OF THE FULLSCREEN SLIDER ELEMENT IN MOBILE MODE */
.responsive #top .slideshow_caption h2 {
font-size: 40px !important;
font-weight: 100 !important;
}
}

@media only screen and (max-width: 1220px) and (min-width: 769px) {
#main {
padding-top: 0!important;
}
#advanced_menu_toggle, #advanced_menu_hide {
top: 16%;
}}

@media only screen and (max-width: 768px) {
.cartlink {display:none;}
.avia-slideshow .avia-caption .avia-caption-title
{ font-size: 14px; }}
@media only screen and (max-width: 480px) {
.avia-caption {
bottom: -10px;
left: -18px;
padding: 0 20px;
width: 305px;
}
.avia-caption .avia-caption-title { margin: 0; }
}
@media only screen and (max-width: 480px) {
#top .avia-slideshow-arrows a { display: none; }
.avia-slideshow-dots {
display: none;
}
}}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #main .container_wrap:first-child .container {
width: 528px;
margin: 0 auto;
}
}

.av_header_transparency #advanced_menu_toggle {
color: inherit;
background: #a41e23;
}

It seems to work

Let me know if it is suitable?

Login details:
I would need you email address to give you these details, please advise?

Thanks for the response Rikard

Looks like it has worked, but would prefer you to have a look. I have also been experiencing drops while editing. Is there a setting or code that can leverage the cache?

login details below

Apologies for the delayed response, thanks Rikard.

How can I increase the size of the welcoming heading on the opening slider?