Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] problema web adaptable

Estas en el tema de problema web adaptable en el foro de Diseño web en Foros del Web. Buenas, tengo una página con 5 secciones. Intento hacerla responsiva para dispositivos móbiles, pero no puedo lograr que en 4 secciones se vea bien. Me ...
  #1 (permalink)  
Antiguo 05/08/2015, 20:04
 
Fecha de Ingreso: febrero-2010
Mensajes: 32
Antigüedad: 14 años, 1 mes
Puntos: 0
problema web adaptable

Buenas,
tengo una página con 5 secciones. Intento hacerla responsiva para dispositivos móbiles, pero no puedo lograr que en 4 secciones se vea bien. Me aparece como miniatura. He probado con meta "newport" y nada. En ocasiones, probando, termina haciendo que aparezca con un zoom excesivo. Sin embargo, una de las secciones SERVICES sí me aparece respetando el ancho de pantalla del móvil y tablet. No puedo encontrar la diferencia con el resto de las páginas! El sitio es [URL="http://www.blackbeltinspection.com.ar"]http://www.blackbeltinspection.com.ar[/URL] Muchas Gracias!
  #2 (permalink)  
Antiguo 06/08/2015, 06:06
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 10 meses
Puntos: 263
Respuesta: problema web adaptable

acabo de revisarla y no se adapta por ningun lado, nisiquiera la seccion que indicas, el asunto es que debes trabajar com media querys para que esta sepa como se va a acoplar a cada pantalla, tambien jugar con DIVs yb los valores en tu css para lograr esto, verifique el css de tu pagina y no esta adaptado para hacer el sitio responsivo
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 06/08/2015, 06:18
 
Fecha de Ingreso: febrero-2006
Mensajes: 155
Antigüedad: 18 años, 2 meses
Puntos: 6
Respuesta: problema web adaptable

Hola, en primer lugar tu sitio tiene un ancho fijo y no tiene nada de responsive, la idea de que sea "responsive" es que al cambiar el tamaño del "viewport" (en pc el tamaño de la ventana), los estilos se adapten, muevan elementos, achiquen otros, etc.

Tu sitio tiene un ancho fijo y no responde a nada al cambiar el tamaño de la pantalla.

Por lo que entiendo lo que estás buscando que no te haga el "zoom out" (esto lo hace porque tu ancho de la página es mayor que el viewport de un móvil). Para esto puedes usar algunas etiquetas que puedes leer aquí: https://developer.mozilla.org/es/doc...wport_meta_tag

Saludos!
  #4 (permalink)  
Antiguo 28/08/2015, 20:40
 
Fecha de Ingreso: febrero-2010
Mensajes: 32
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema web adaptable

Muchas gracias por tu respuesta! disculpa que recién ahora puedo contestarte (es que estuve bastante enferma).

Estuve viendo lo que me mandas, intenté todas las versiones posibles pero no logro que el contenido se adapte al ancho del dispositivo.
Capaz me expresé mal, pero la idea no es tanto que sea responsiva, sino más bien que entre en el ancho del dispositivo. Y el problema es que: o me sale en miniatura, o si agrego viewport me agranda mucho y se ve una parte nomás. Por más que le de initial scale o maximum scale en 1. Quize ponerle un media queries y tampoco me ha funcionado

@media screen and (max-width: 800px) {
#wrap{
width:100%;
}
}
@media screen and (max-device-width : 480px) {
#wrap{
width:100%
}
}
  #5 (permalink)  
Antiguo 30/08/2015, 09:19
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 10 meses
Puntos: 263
Respuesta: problema web adaptable

recuerda que las reglas no solo debes aplicarlas al contenedor principal, si no que debes tambien indicar cual va a ser el comportamiento de los demas elementos, es decir, si en determinadas pantallas no le aplicas el float:left a algunos div, estos van a estar fijos y por mas ancho al 100% que le des al contenedor, el navegador no va a saber que hacer con el resto y se vera igual o peor, ejemplo:

Código CSS:
Ver original
  1. <style>
  2.  
  3.  
  4. @media screen and (max-width:480px){
  5.     #wrap{
  6.     width:100%;
  7. }
  8. #main_container{
  9.     width:100%;
  10. }
  11. #header{
  12.     display:none; /*ocultamos el menu alcual*/
  13. }
  14. #nav{
  15.     display:block; /*mostramos el menu para movil o tablet*/
  16. }
  17. /*Resto de reglas para el menu movil*/
  18. .home_section_dos{
  19.     width:100%;
  20. }
  21. .home_title{
  22.     font-size:16px;
  23.     font-weight:bold;
  24.     text-align:center
  25. }
  26. .home_section_dos p{
  27.     font-size:12px;
  28.     text-justify:auto;
  29. }
  30. }
  31. </style>

aqui le decimos al navegador que va a hacer con los elementos si acceden desde un movil, como ver hay que indicar como van a estar organizados toooodos para que se cumpla lo responsive.

te recomiendo este sitio http://responsivetest.net/ para ir haciendo pruebas de tu css y visualizar como se vera la pagina en diferentes dispositivos

Saludos
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 31/08/2015, 06:12
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 16 años, 7 meses
Puntos: 48
Respuesta: problema web adaptable

Cita:
Iniciado por candediez Ver Mensaje
Capaz me expresé mal, pero la idea no es tanto que sea responsiva, sino más bien que entre en el ancho del dispositivo. Y el problema es que: o me sale en miniatura, o si agrego viewport me agranda mucho y se ve una parte nomás. Por más que le de initial scale o maximum scale en 1. Quize ponerle un media queries y tampoco me ha funcionado
Lo que comentas del viewport es el funcionamiento lógico.

Para hacerla responsiva hay que añadirle el viewport, y luego ir adaptando los tamaños de los elementos que necesites. Como bien te comentan no vale con modificar el ancho del contenedor principal.

Quizás, lo que deberías es contactar con un profesional. El diseño y la programación, si quieres un buen trabajo es mejor que te lo haga alguien que haya estudiado para ello.

En cualquier caso, suerte.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #7 (permalink)  
Antiguo 31/08/2015, 21:07
 
Fecha de Ingreso: febrero-2010
Mensajes: 32
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: problema web adaptable

Muchas Gracias por sus aportes!
Saludos

Etiquetas: adaptable, página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:03.