1

muchas gracias por ayudar!

Estoy intentando desarrollar una malla universitaria interactiva. Actualmente luce asi:

enter image description here

La idea que tengo en mente es:

  • Todas las cards tengan el mismo tamaño
  • El contenido superior(codigo del curso y creditos), el contenido medio(nombre de curso) y el contenido inferior(ID del curso y requisitos) queden dentro de la card.
  • Manejar el nombre del curso para que se adapte al tamaño fijo de la card.

Por ejemplo, si pongo 150% de zoom, se ve asi:

enter image description here

Y si pongo 50% de zoom, se ve asi, que es mas parecido a lo que estoy buscando:

enter image description here

Dejo el snippet minimizado para que puedan reproducir dos cursos con las cards.

.row {
  margin-bottom: 0px !important;
}

#yearHolder {
  margin-left: 5px;
}

.col .s12 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}



.card-content {
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.card.small {
  height: 150px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <title>Document</title>
</head>
<body>
    <div id="malla" class="row">
        <div id="1year" class="col l2 s6 offset-l1"><h6 class="center">First Year</h6>
            <div id="yearHolder" class="row">
                <div id="1semester" class="col s6">
                    <div class="col s12">
                        <div class="card horizontal red">
                            <div class="card-stacked ">
                                <div class="card-tabs">
                                    <div class="col left">CBM-1000</div>
                                    <div class="col right">8</div>
                                </div>
                                <div class="card-content">
                                    <h6 class="black-text text-flow center-align">Algebra y Geometría</h6>
                                </div>
                                <div class="card-tabs ">
                                    <div class="row">
                                        <div class="col left">1</div>
                                        <div class="col right">12,13,15</div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="2semester" class="col s6">
                    <div class="col s12">
                        <div class="card horizontal red">
                            <div class="card-stacked ">
                                <div class="card-tabs">
                                    <div class="col left">CBM-1010</div>
                                    <div class="col right">8</div>
                                </div>
                                <div class="card-content">
                                    <h6 class="black-text text-flow center-align">Comunicación Elemental para la Ingenieria</h6>
                                </div>
                                <div class="card-tab">
                                    <div class="row">
                                        <div class="col left">1</div>
                                        <div class="col right">12,13,15</div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Muchas gracias por su ayuda!

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.