Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

i am unable to make this website mobile friendly but it just don't work

on 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Project</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="mycss.css">
  </head>
  <body id="main">
<div class="container-fluid">
<div class="row">
  <div class="col-lg-12">
  <p class="h1 text-center text-white">Generate Names</p>
  </div>
<div class="offset-lg-2 col-lg-8">
<div class="row" id="windows">
<div class="col-lg-6 ">
<form id="namefinder" action="index.html" method="post">
  <div class="form-group">


<label for="country"> Filter By Country:
</label >
  <select class="form-control" name="country" id="country">
    <option value="">-- Select --</option>
    <option value="argentina">Argentina</option>
    <option value="brazil">Brazil</option>
    <option value="colombia">Colombia</option>
    <option value="costa rica">Costa Rica</option>
    <option value="france">France</option>
    <option value="italy">Italy</option>
    <option value="mexico">Mexico</option>
    <option value="portugal">Portugal</option>
    <option value="united states">United States</option>
    <option value="india">India</option>
    <option value="japan">Japan</option>
  </select>
<label for="genre"> Genre:
</label>
  <select class="form-control" name="genre" id="genre">
    <option value="">-- Select --</option>
    <option  value="male">Male</option>
    <option  value="female">female</option>
  </select>
<label for="number"> Number of names to generate:
</label>
  <input type="text" min="5" max="15"  name="number" id="number"  class="form-control" placeholder="Eg.20">
<br>
<button type="submit" id="btn" class="btn btn-primary form-control" name="button">GENERATE</button>
</div>
</form>
</div>
<div class="col-lg-6" id="targets">
<h4 class="text-center text-muted"></h4>
<!-- <ul class="list-group">
  <li class="list-group-item">Cras justo odio
  <span class="badge badge-primary float-right">$200</span>
  </li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
<div class="alert-info text-info budget">Budget $500</div>
<div class="alert-danger text-danger left">Left $500</div> -->
</div>
</div>
</div>
</div>
</div>
<script src="script.js" charset="utf-8"></script>
  </body>
</html>

this is my code, i am trying to convert it mobile friendly with bootstrap but whenever i add col-xs-12 class it mess up the code and even through the webpage is not mobile friendly in the end. how can i make this webpage mobile friendly.

by even using bootstrap 3 i am unable to fix this problem. grid system should work fine when you use col-xs or col-sm but this time it is unable to work. i would appreciate if somebody point my mistake.

Comments

Post a Comment