I am using react Is there any way to make this html code responsive its not viewing correctly when I se on mobiles

I am using react js and I want to make this html code responsive on mobiles how can I do that may be media queries is needed but how to write media queries on react what should I add or change on this code to make it responsive

<div className = "rock">
   <div className="container" >
      <div className="row">
         <div className="col-sm-6 form-group" style={{paddingTop: '15%', paddingRight: "130px"}}>
         <div className ="Fire"><img   src="../img/firelogo.PNG" alt="try again" /></div>
         <div className="continer">
            <form method="post" className="form" id="form">
               <p style={{fontSize: '24px'}}> Login </p>
               <div className="txt_field">
                  <input type="text" required  name="employeeid" id="employeeid" />
                  <span></span>
                  <label>Employee ID</label>
               </div>
               <div className="txt_field">
                  <input type="password" required  name="password" id="password" />
                  <span></span>
                  <label>Password</label>
               </div>
               <a style = {{color: "black", fontSize: "16px"}} href ="true">Forgot Password?</a>
               <div style ={{paddingTop: "12%"}}>
               <button className="btn btn-danger mt-4" type="submit">Login</button>
         </div>
         </form>
      </div>
   </div>
   <div className="col-sm-6 form-group" style={{width: '100%', height: 'auto', objectFit: 'contain'}}>
   <img src="../img/Cap1.PNG" alt="try again" style ={{width: "125%", height: "100%"}} />
</div>
</div>
</div> 
</div>

1 answer