Slider not responsive

My site has a full width slider. It is not responsive on some smaller laptop screens and larger screens. Also, the logo is not responsive on some sizes of mobile phones. Before they stopped responding, theme support provided me with the following css, which is applied. I don’t know enough about media queries to fix this. Please help?

@media only screen and (max-width: 768px){
#slider {
    height: 306px !important;
}
#slider .slides > li {
    min-height: 306px;
    background-size: 100%;
}
}

@media only screen and (max-width: 600px){
#slider {
    height: 163px !important;
}
#slider .slides > li {
    min-height: 163px;
    background-size: 100%;
}
}

@media only screen and (max-width: 320px){
#slider {
    height: 163px !important;
}
#slider .slides > li {
    min-height: 163px;
    background-size: 100%;
}
}

@media screen and (max-width: 400px !important;) {
   .two-columns {
    width: 100%;
    float: none;
    margin-right: 0;
   }
}

@media only screen and (max-width: 600px){
.header-image .title-area {
    height: 90px;
    width: 205px;
    background-size: 100% !important;
}
.site-header .widget-area {
    width: auto;
}
.mobile_menu {
    position: absolute;
    float: right;
    top: 43px;
    right: 30px;

}
}

@media only screen and (max-width: 480px){
.header-image .title-area {
    height: 90px;
    min-height: 0;
    width: 140px;
    background-size: 100% !important;
}
}

@media only screen and (max-width: 320px){
.header-image .title-area {
height: 44px;
    min-height: 0;
    width: 165px !important;
    background-size: 100% !important;
}
.mobile_menu {
top: 23px;
    right: 30px;
}
}

• This topic was modified 8 years, 11 months ago by Steven Stern (sterndata). Reason: put code in backticks

The page I need help with: [log in to see the link]