CSS - Hacer un <Form> Responsive

 
Vista:

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.

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>
CSS:
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Hacer un <Form> Responsive

Publicado por Brahim (2 intervenciones) el 03/04/2018 20:27:25
Muchas gracias, no conocía eso. Al final lo he solucionado con los "col-" o "Sistema de Columnas" de Boostrap.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar