Making Responsive Theme Work Responsively

Hi, I am trying to make my responsive theme behave responsively on mobile devices. The website is fl-eventsandweddings.com

Some of the text will not wrap on the smaller mobile screens, and also the frontpage above the fold image carousel will not resize to show the image and all white text on the image on mobile screens.

I’ve tried many different codes, including:

@media (min-width: 481px) and (max-width: 767px) {
div{
font-size: 12px;
float: right; }

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
    .gridmain {
        width:100%;
    }
    .gridright {
        width:100%;
    }
}

@media (min-width: 378px) and (max-width: 1063px) {
div {
font-size: 12px;
float: right;}
}

@media screen and (max-width:767px) {
   #header, #wrapper {
      width: 100%;
   }
}

img {
     border: 0 none;
     max-width: 100%;
     vertical-align: middle;
}

None of these is working the way I want them to. I’ve also renamed img on the bottom code to intro-slideshow, owl-carousel and a few other things to try and get it to listen, but it doesn’t recognize anything I’ve tried.

Can someone point me in the right direction? Any help is greatly appreciated.