From 9eee296c81dea97083a7bff2380b77efd8fbf16b Mon Sep 17 00:00:00 2001 From: Kumi Date: Wed, 22 May 2024 18:17:37 +0200 Subject: [PATCH] feat(css): enhance card design with flex layout Introduced a flexbox layout to cards for a more adaptive and cohesive structure. This update includes styling for `.card-body` and `.card-footer`, ensuring they occupy space efficiently and maintain visual consistency across different viewport sizes. The `.card-footer` now has a distinct background and top border to clearly delineate it from the body content, enhancing readability and aesthetic appeal. This enhancement addresses the need for more flexible layout options within cards, improving the overall user experience by ensuring content is well-organized and visually appealing across devices. --- static/css/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/static/css/style.css b/static/css/style.css index f80cf75..9ac99d7 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -73,6 +73,20 @@ blockquote { border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; + display: flex; + flex-direction: column; +} + +.card-body { + flex: 1; + padding: 1rem; +} + +.card-footer { + padding: 1rem; + background-color: #f8f9fa; + border-top: 1px solid #ddd; + margin-top: auto; } .card-img-top {