Partir la página en divs horizontales

Inicio Foros WordPress Programación Partir la página en divs horizontales

Este debate contiene 3 respuestas, tiene 3 mensajes y lo actualizó  Wazz hace 4 años.

  • Autor
    Publicaciones
  • #76634

    Wazz
    Participante

    Soy muy novato y me estoy volviendo loco con este tema.

    Estoy creando una página y me gustaría que el contenido quedase dividido en dos columnas: en la derecha, un div con Google Maps insertado. En la izquierda, varios divs para poner información (teléfono, email, etc.). Experimentando, se me ocurrió crear dos div class con width 45% (para que no se tocasen) y una float left y otra float right. Cuando veo la web desde el móvil, las cajas ocupan… la mitad de la pantalla del móvil, es decir, se ve todo fatal. Debe haber una forma mejor de hacerlo pero yo no la conozco.

    ¡Os lo agradeceré un montón!

    CSS

    .cajamitadizquierda{
    background-color: #f6f6f6;
    border: 1px solid #e0e0e0;
    padding: 12px;
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
    max-width: 45%;
    float: left;
    overflow:hidden;
    }

    .cajamitadderecha{

    background-color: #f6f6f6;
    border: 1px solid #e0e0e0;
    padding: 12px;
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
    max-width: 45%;
    float: left;
    overflow:hidden;
    }

     

     

  • #76643

    LGrusin
    Miembro

    Debes hacer el theme responsive para que se vea bien en los móviles añadiendo los estilos adecuados en el style.css. Por ejemplo, max-width: 95% (aproximadamente), sólo cuando se muestre en un móvil. Esto hará que salga una caja debajo de la otra.

    Mira los themes que vienen por defecto con WordPress para que veas como lo hacen o también algún tutorial para crear sitios responsives.

    Un saludo

  • #76645

    Aprendiz
    Participante

    La cuestión básica a tener en cuenta es que para cada dispositivo tiene que haber una hoja de estilo diferente. Para eso, busca información sobre “css media queries”.

  • #76674

    Wazz
    Participante

    ¡Muchas gracias por la info!

El foro ‘Programación’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest