Foro

Home Forums Programación Css3 Duda sobre estructura y altura de la home

This topic contains 3 replies, has 2 voices, and was last updated by Daniel Riera Daniel Riera 2 años, 8 meses .

Viendo 4 respuestas - de la 1 a 4 (de 4 en total)
  • Duda sobre estructura y altura de la home

    Intervenciones
  • thecarmen 
    Participant

    Hola a todos buenos días, os escribo para ver si me podéis aconsejar sobre cómo hacer la estructura de la home, estoy atascada en una tontería de novato :cry: y me gustaría saber cómo lo hacéis vosotros.

    Me piden que al cargar la APP se vea lo siguiente sin tener que hacer scroll (adjunto imagen):

    En principio pues no pensé que fuera ningún problema, el tema es que no consigo que se quede ‘atractivo’ por el bloque de los 6 enlaces.

    Si simulo la APP en un iphone 6 se ve mucho espacio entre los 6 bloques y el footer, si lo simulo desde un iphone4 se queda muy justo y tengo que hacer un poco de scroll.

    No sé como hacer el responsive para que se quede todo ajustado sin salirse de la pantalla.

    ¿Algún consejo, ejemplo, recomendación? Por favor!!!!!

    He buscado ejemplos de apps para ver un poco, pero todas las que hay en themeforest y demás son como páginas webs normales en modo movil, que tienen que hacer scroll para ver el contenido, no he encontrado nada que pueda ver este caso como en app existentes (por ejemplo pokerstar, por decir una..)

    Muchas gracias por vuestro tiempo.


    Daniel Riera
    Daniel Riera 
    Participant

    Hola thecarmen, si quieres que sea vea correctamente en todos los tamaños de pantalla deberás hacerlo con media queries en CSS, un ejemplo

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.

    @media (max-width: 600px) {
      .header {
        height:50px;
      }
    }

    En una resolución menor a 600px de ancho la header tendría un alto de 50px ahora bien.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.

    @media (max-width: 400px) {
      .header {
        height:40px;
      }
    }

    Si la pantalla es menor de 400px de ancho la header tendría una altura de 40px

    Ahí tendrás que añadir los estilos que quieras para todas las resoluciones. Intenta posicionarlos todos y luego ajustas las resoluciones utilizando los media queries.

    Un enlace que te puede ayudar https://developer.mozilla.org/es/docs/CSS/Media_queries

    Y aquí para que lo entiendas mejor http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1

    Saludos!


    thecarmen 
    Participant

    Muchas gracias Daniel Riera, voy a ver que tal con esto : )

    Había pensado en poner un div como contenedor de los 6 bloques, que tuviera de alto todo el espacio entre el slider y el footer, y alinea los bloques verticalmente con un display:table/display:cell, pero creo que si no tengo un alto fijo en píxeles para asignarle al contenedor padre no voy a poder. vaya lio… jejeje

    Bueno voy a probar con las media queries a ver que tal queda.

    Gracias de nuevo por tu tiempo y rapidez!


    Daniel Riera
    Daniel Riera 
    Participant

    Hola!

    De nada, para eso estamos, cualquier duda ya sabes :)


Viendo 4 respuestas - de la 1 a 4 (de 4 en total)

You must be logged in to reply to this topic.

RT @addyosmani: Learn how to virtualize large lists & tables with react-window: https://t.co/ggzMgmX6zP ~ a small library for efficiently r…04:25 PM Jun 26th