First and foremost, a huge thank you to everyone who has been so helpful to many people!
Secondly, I apologize for posting images in Spanish, as I currently do not have the time to translate them into English. Nevertheless, the text within the photos is not essential.
At this time, I am working on developing an interactive degree program. Here is a snapshot of the current state:
https://i.sstatic.net/OAK0F.jpg
My goal is to achieve the following with the cards:
- Maintain uniform size for all cards
- Ensure all content (top, middle, and bottom) remains within the cards
- Adjust the middle content (course names in Spanish) to resize accordingly in order to preserve the card size
For instance, if I apply a 150% zoom, everything will appear as follows:
https://i.sstatic.net/MgjEI.jpg
And when I use a 50% zoom, it aligns closely with what I am aiming for:
https://i.sstatic.net/fiboF.jpg
I have included code snippets where you can see an example of two courses in one year.
.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>Please guide me if my request is not formatted properly for quick troubleshooting assistance
Once again, a big thank you to everyone!