bxslider images resize to very small size

I am using foundation 5 to build responsive website. I am using bxslider to setup a responsive slideshow. Image size for desktop is 1800X500. The problem is for mobile screen, the images resize and get cropped to very small when browser resized for mobile.

i would want solutions to the following problems: a) i have also put a transparent div with a textbox and submit button on the slider. The transparent div also does not display correctly on a mobile.

b) For mobile i would like the image height to be atleast 400px (with transparent div properly centered).

c) make bxslider images full width(1800px) of screen for desktop/laptop

<div class="row">
        <ul class="slide1" style="margin:0px;padding:0px;">
              <li>
                    <img src="img/3.jpg" /> 
                                <div class="caption1">  
                                        <form class="transparent" style="background-image:url(img/top.jpg);display:block;">
                                            <h6 style="color:white;margin-left:15%;padding-top:3px;">WEDDING PLANNING MADE EASY </h6>
                                            <div class="row" >
                                                    <div class="large-6 small-12 large-centered small-centered columns">    
                                                        <div class="row collapse postfix-round">
                                                            <div class="small-9 columns">
                                                                <input type="text" placeholder="Select Category" />                                                         
                                                            </div>                                                          
                                                            <div class="small-3 columns">
                                                                <a href="#" class="button postfix">Go</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                        </form>
                                 </div>           
              </li>
              <li><img src="img/4.jpg" /> </li>
              <li><img src="img/1.jpg" /></li>            
              <li><img src="img/2.jpg" /></li>            
        </ul>
        </div>

       ***CSS:***

/**************** transparent image ******************/
.transparent{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";       /* IE 8 */
filter: alpha(opacity=70);  /* IE 5-7 */
-moz-opacity: 0.7;          /* Netscape */
-khtml-opacity: 0.7;        /* Safari 1.x */
opacity: 0.7;               /* Good browsers */
}
/**************** transparent image ******************/

/********** position bx slider caption  ***********/
.caption1 {
position:absolute;
    bottom:15%;
    left:35%;
    z-index:10;
    width: 40%;
   color:white;
    /*background: none repeat scroll 0% 0% rgba(80, 80, 80, 0.75);
    background-color: rgba(80, 80, 80, 0.75);*/
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;`