Hi,

I have a div with the background image. I want to show text on the image responsively. Now the text is coming but it is only coming correct on the computer, not on any other devices. 

<div class="browser_width colelem" id="u374-bw">
                    <div id="wrapBackground">
                        <div id="dvBackground" style="position:relative;">
                            <div id="block1" style="position:absolute;top: 3%;left: 19%;margin:0 auto;right:0;text-align:left;">
                                <div class="left">
                                    <div id="dvHeaderTextStyle">
                                        <p style="font-size:40px;">FIRETEX® FX6002</p>
                                        <p style="font-size:25px;">@Title.PassiveFireProtectionHeadline</p>
                                        <p style="font-size:25px;">@Title.UltraFastCuringIntumescent</p>    
                                    </div>
                                </div>

                                <div class="left" style="margin-top:8%;">
                                    <div id="dvHeaderTextStyle" style="padding-bottom:1.5%;">
                                        <p style="font-size:25px;">Time on your side</p>
                                        <p style="font-size:18px;">Where speed is key, the ultimate in fast curing application </p>
                                        <p style="font-size:18px;">and steel coating throughput. Only one hour to cure, two</p>
                                        <p style="font-size:18px;">hours to handle and damage resistant properties.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


<style type="text/css">
  #wrapBackground 
   {
    width: 100%;
    height: auto;
   }

  #dvBackground {
   background: url(../../images/FX6002FX7220/fx6002productpagebanner.jpg);                                   
   background-size: cover;                        
   background-repeat: no-repeat;
   display: block;
   padding-top: 23.720892%;
   }

  .left {
  width: 39%;
  }

   #dvHeaderTextStyle {
    padding-left: 6%;
    padding-top: 1%;
    background:rgba(0, 0, 0, 0.5);
    margin-left:3%;
    margin-top:1.4%;
    }

    #dvHeaderTextStyle p {
     line-height: 1.3 !important;
     color: white;
    }

                      
 </style>

Need an urgent help.