Hacer un <Form> Responsive
Publicado por Brahim (2 intervenciones) el 03/04/2018 15:44:40
Hola, he descargado la siguiente plantilla: https://convertidoryoutubemp3.win/convertidor/s1/
Pero como pueden ver, si hacen la ventana más pequeña o entran con móvil, no se ve toda la barra de búsqueda.
Solo necesito hacer responsive esa parte, todo lo demás está perfecto.
Aquí les mostraré tanto el código del buscador como la parte de css que ya está escrita sobre él.
CSS:
Pero como pueden ver, si hacen la ventana más pequeña o entran con móvil, no se ve toda la barra de búsqueda.
Solo necesito hacer responsive esa parte, todo lo demás está perfecto.
Aquí les mostraré tanto el código del buscador como la parte de css que ya está escrita sobre él.
1
2
3
4
<div class="input-group col-lg-12">
<input type="url" name="url" id="url" class="form-control" placeholder="Pega aquí la URL..." required>
<span class="input-group-btn download"><input class="btn btn-primary" id="download" value="Convertir" type="button"></span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#url {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
height: 60px;
padding-left: 20px;
}
#download {
height: 60px;
}
label {
color: #fff;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
margin-bottom: 0;
margin-right: -3px;
}
input[type=radio]:checked + label {
color: #ccc8ce;
background: #337ab7;
}
label + input[type=radio] + label {
border-left: solid 3px #337ab7;
}
.radio-group {
border: solid 3px #337ab7;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
input[type=radio]:checked + label {
color: #fff;
background: #337ab7;
}
.control-label {
color: #000;
}
Valora esta pregunta
0