Bxslider images resize to very small size

I am using framework 5 to build a responsive website. I am using bxslider to set up a responsive slideshow. Image size for desktop is 1800X500. The problem is on the mobile screen, the dimensions of the images shrink and become very small when the mobile browser is resized.

I need solutions to the following problems: a) I also added a transparent div with a textbox and a submit button on the slider. The transparent div also renders incorrectly on mobile.

b) For mobile, I would like the image height to be at least 400px (with the transparent div properly centered).

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

<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;`