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
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Hacer un <Form> Responsive

Publicado por xve (489 intervenciones) el 03/04/2018 18:10:57
Hola Braham, para ello, tienes que utilizar media query... lo cual lo puedes crear para diferentes tipos de resoluciones dependiendo de como sea el formulario.

Revisa este código, ahi veras como hacerlo: https://www.lawebdelprogramador.com/codigo/CSS/2694-Ejemplo-de-una-web-responsive.html
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

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