How to make an element responsive

Question

I’m having problems with an element on my website, it gets normal on the computer, more on smaller resolutions (mobile phones), it doesn’t get responsive.

Below are some prints:

As it is in the Computer: (Right)

As it is in Cellular: (WRONG!)

How to stay in Cellular: (Sure!)

I want it to look like 3° Print.

Follows the code:

HTML:

<div class="buscar_dominio">
<div class="tamanho">
    <div class="esquerdo">      
        <div class="buscar_secao">        
        <form method="post" id="dominio-form-busca">
        <input type="hidden" name="direct" value="true">
        <div class="www"><label for="s" class="www-texto">www.</label></div>       
        <div>
        <input class="input" name="domain" id="s" value="Insira seu domínio aqui" onfocus="if (this.value == 'Insira seu domínio aqui') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Insira seu domínio aqui';}" type="text" style="margin-bottom: 0px;">
        <select class="witch" name="ext">
            <option value=".com">.com</option>
            <option value=".net">.net</option>
            <option value=".org">.org</option>
            <option value=".com.br">.com.br</option>
            <option value=".net.br">.net.br</option>
            <option value=".in">.in</option>
            <option value=".me">.me</option>
            <option value=".info">.info</option>
            <option value=".biz">.biz</option>
            <option value=".us">.us</option>
            <option value=".name">.name</option>
            <option value=".cc">.cc</option>
            <option value=".ws">.ws</option>
            <option value=".mobi">.mobi</option>
            <option value=".tv">.tv</option>
            <option value=".co">.co</option>
            <option value=".br.com">.br.com</option>
            <option value=".xxx">.xxx</option>
        </select>
        <input id="botao-busca" value="Buscar" type="submit"> 
        </div>
        </form>        
        </div>        
        <div class="clearfix"></div>        
        <div class="sm_links"><a href="#">Tabela de Preços</a>  | <a href="#">Pesquisa de Domínios em Massa</a> | <a href="#">Transferir Domínio</a> | <a href="#">Promoções</a></div>        
    </div>
    <div class="bg-transparente"><ul><li> Aqui irá ficar o título</li><li class="titulo">Aqui ficará o sub-título</li><li class="porque">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris.</li></ul></div>    
    <div class="direito">       
        <ul>
            <li>.COM<em>Apenas</em> R$ 22,90/ano</li>
            <li class="promo">.ORG<em>De <s>R$ 27,90</s> por</em> R$ 13,90/ano</li>
            <li>.NET<em>Apenas</em> R$ 19,90/ano</li>
            <li>.COM.BR<em>Apenas</em> R$ 34,90/ano</li>
        </ul>        
    </div>
</div>
</div>

CSS:

body{font:normal 14px arial;}

a {text-decoration:none; }

.buscar_dominio {
    float: left;
    width: 100%;
    background:#EEE; }

.buscar_dominio .esquerdo {
    float: left;
    width: 54%;
    padding: 16px 0px 5px 0px; }

.buscar_dominio .direito {
    width: 57%;
    min-height: 90px;
    padding: 20px 0px 16px 0px; }

.buscar_dominio .bg-transparente {
    float: right;
    width: 43%;
    min-height: 90px;
    padding: 25px 0 0 0;
    font:normal 28px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:center;
    color: #000; }

.buscar_dominio .porque {
    font:normal 13pt Arial;
    width:90%;
    margin:10px 0px 0px 7%;
    color: #333;
    text-align:center; }

.buscar_dominio .titulo {
    font-size: 20px;
    font-family:Tahoma, Geneva, sans-serif;}

.buscar_dominio .esquerdo .buscar_secao {
    float: left;
    width: 95%;
    margin-left: 15px;
    padding: 1.4% 1.6%;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #E0E0E0; }

#dominio-form-busca { margin: 0; padding: 0; }

#dominio-form-busca #s{
    border: 1px solid #fff;
    border-left: 1px solid #F5F5F5;
    width: 45%;
    height:30px;
    padding:7px 10px 7px 10px;
    color: #393a3b;
    float: left;
    border-radius: 0px;
    font-size: 16px;
    background-color: #f3f3f3; }

.www {
    border: 1px solid #fff;
    width: 8%;
    height:30px;
    margin-right: -1px;
    text-align: center;
    padding:7px 10px 7px 10px;
    color: #393a3b;
    float: left;
    border-radius: 4px 0px 0px 4px;
    font: normal 14px arial;
    background-color: #FFEB00; }

.www-texto {
    margin-top:4px;
    cursor:default;
    font-size:14pt; }

.buscar_dominio .esquerdo .buscar_secao .witch {
    float: left;
    width: 100px;
    height: 44px;
    font-size: 16px;
    color: #393a3b;
    padding: 10px 10px 10px 10px;
    margin: 1px 0px 0px -10px;
    border: none;
    border-radius: 0px 4px 4px 0px;
    background-color: #FFEB00; }

.buscar_dominio .esquerdo .buscar_secao #botao-busca{
    float: right;
    width: 90px;
    height: 44px;
    margin-top: 1px;
    text-align: center;
    cursor:pointer;
    overflow:hidden;
    color: #fff;
    font: normal 16px tahoma;
    text-transform: uppercase;
    background: #004897;
    border-radius: 4px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }

.buscar_dominio .esquerdo .sm_links {
    float: left;
    margin-left: 15px;
    color: #999;
    font-size: 13px;
    margin-top: 5px; }

.buscar_dominio .esquerdo .sm_links a {
     color: #999; }

.buscar_dominio .esquerdo .sm_links a:hover {
     color: #0099FF; }

.buscar_dominio .direito ul {
     padding: 0px;
    margin-right: 15px; }

.buscar_dominio .direito li {
    float: left;
    padding: 10px 8px 13px 8px;
    margin: 0px 0px 15px 15px;
    width: 100px;
    background-color: #fff;
    border-radius: 4px;
    font-size: 11pt;
    color: #393a3b;
    text-align: center;
    border: 1px solid #DBDBDB; }

.buscar_dominio .direito li em {
    font-size: 12px;
    color: #727272;
    font-style: normal;
    display: block;
    line-height: 16px; }

.buscar_dominio .direito s { color: #C30; }

.buscar_dominio .direito .promo { color: #00AC00; }

ul li {list-style: none;}

Jsfiddle

Answer 1

Why not use bootstrap in your project? With its structure, you can set the size and position of the columns for your project so that with the screen resizing/resolution change, your content adapts.