diff --git a/demo/src/main/resources/static/css/home.css b/demo/src/main/resources/static/css/home.css index 5d835bf..8265587 100644 --- a/demo/src/main/resources/static/css/home.css +++ b/demo/src/main/resources/static/css/home.css @@ -9,21 +9,21 @@ /* login.css */ body, html { - height: 100%; + height: 100vh; margin: 0; font-family: 'Roboto', sans-serif; background-color: var(--pale-yellow); + overflow: clip; } .body { display: flex; + flex-direction: row; height: 100%; } /* Header Styles */ .top-header { - position: sticky; - top: 0; display: flex; align-items: center; justify-content: center; @@ -48,11 +48,13 @@ body, html { } .body-left { + position: sticky; flex-grow: 0; width: 400px; } .body-right { + position: sticky; flex-grow: 0; width: 400px; } @@ -183,29 +185,39 @@ body, html { display: flex; justify-content: center; align-items: flex-start; + overflow: scroll; + height: 100%; } .recipe-card { + margin-top: 35px; width: 100%; display: flex; flex-wrap: wrap; gap: 35px; justify-content: flex-start; flex-direction: row; + height: fit-content; } .card { display: flex; align-items: center; gap: 10px; + max-height: 200px; - flex: 0.2 0.2 260px; - max-width: 300px; + flex: 1 1 260px; + max-width: 400px; background: var(--peach); border-radius: 12px; padding: 20px; } +.card .card-text { + height: 100%; + overflow: scroll; +} + .card img { width: 100%; height: 100px;