Página de ejemplo

@media (min-width: 540px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 720px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 960px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } /* .principal{ width: 1300px; } / } .img-service { width: 60px; margin-right: 10px; } .media { display: flex; align-items: flex-start; } .content-text { text-align: justify; / […]

@media (min-width: 540px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 720px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 960px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } /* .principal{ width: 1300px; } */ } .img-service { width: 60px; margin-right: 10px; } .media { display: flex; align-items: flex-start; } .content-text { text-align: justify; /* background-color:rgb(21, 196, 15); */ } .card-text { text-align: left; font-size: 22px; font-weight: bold; margin-top: 10px; } .card-footer { background-color: #0f69c4; color: white; font-weight: bold; } .card { margin-top: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* height: 250px; // quitar esta línea para altura fija */ display: flex; flex-direction: column; transition: box-shadow 0.3s ease; /* (opcional) efecto hover */ } .card-body { flex: 1 1 auto; /* hará que crezca con su contenido */ display: flex; flex-direction: column; } .card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* sombra más fuerte al pasar el mouse */ } a{ text-decoration: none; }