Bootstrap with Jssor slider with grid class alignment for mobil

Hi use Jssor slider on my bootstrap site, and took some elements and made a class for them. so i better could control the css my self. but now when i view them on ipad and mobil they are not align anymore. it look great on desktop and large desktop.

its the classes slide1_top and slider1, i guess somehow i need to make a grid for them with class row and .col-xs-12 .col-sm-6 .col-lg-8. i think

i am not a specialist i anyway, just trying to learn. I hope it make sense how i tell it

Link to Site

Kind Regards

Thomas

<div u="slides" style="cursor: move; position: absolute; right: 0px; top: 0px; width: 1600px;
        height: 500px; overflow: hidden;">
        <div>
            <img u="image" src="img/banner/Banner-smartpc.jpg" />
            <div u="caption" t="NO" t3="RTT|2" r3="137.5%" du3="3000" d3="500" style="width: 1920px; height: 300px; top: 100px; left: 600px;">
            </div>
                <div class="slide1_top">
                        <h2>VELKOMEN TIL SERVICEPC</h2>
            </div>
            <div class="slide1">
                        <h4>Hos Service-PC yder vi service af alt PC udstyr.    fejlfinding og reparation til en fornuftig pris.</h4>  
        </div>
        </div>
        <div>

My CSS for the 2 classes:

 .slide1_top h2 {

font-family: oswald,"Open Sans",Helvetica,Arial,sans-serif ;
position: absolute; 
width: 480px; 
height: 120px; 
top: 100px; 
left: 1020px; 
padding: 5px;
text-align: right; 
line-height: 60px; 
text-transform: uppercase; 
font-size: 40px; 
text-align: center;
color: #FFFFFF;

}
.slide1 h4 {
font-family: oswald,"Open Sans",Helvetica,Arial,sans-serif ;
color: #FFFFFF;
position: absolute; 
width: 480px; 
height: 120px; 
top: 180px; 
left: 1000px; 
padding: 5px;
text-align: right; 
line-height: 36px; 
font-size: 26px;">


}