From 7698331e4bb85232535182eeeaa09fdf54b66a76 Mon Sep 17 00:00:00 2001 From: Jacob Date: Tue, 10 Dec 2019 04:44:33 -0500 Subject: Update main page to put recipes three wide, and to work --- .../src/app/recipe-card/recipe-card.component.css | 66 +++++++--------------- 1 file changed, 20 insertions(+), 46 deletions(-) (limited to 'recipeBuddy/src/app/recipe-card/recipe-card.component.css') diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css index 8cf412a..7b0fd3b 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -1,21 +1,10 @@ - .example-viewport{ - height: 250px; - width: 80%; - margin-left: 50px; - border: 1px solid saddlebrown; +.example-viewport { + height: 500px; + width: 100%; display: flex; - } - .list{ - height: 50px; - justify-content: center; - align-items: center; - } - h2{ - margin-left: 40px; - } - .container{ - margin-bottom: 40px; - } + margin-left: auto; + margin-right: auto; +} p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } @@ -46,33 +35,9 @@ button{ margin:0 auto;width:100px; } .example-card { - max-width: 400px; float: left; - width:25%; - padding: 0px 35px; -} -.example-header-image { - background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); - background-size: cover; -} -#like-rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; - background-size: contain; -} -#like-rating img{ - width:100%; -} -#rating { - height: auto; - width: auto; - max-width: 200px; - max-height: 1000px; -} -#rating img { - width:100%; + width: 100%; + margin: 10px; } #edit { padding: 10px; @@ -86,9 +51,6 @@ button{ #delete { padding: 10px; } -#previous { - float:left; -} .example-card:hover { border: solid; } @@ -96,4 +58,16 @@ button{ font-weight: bold; cursor: pointer; padding: 10px; +} +#imgContainer { + padding:10px; + text-align:center; +} +#ratingContainer { + padding:10px; +} +#cardContainer { + width: 35%; + padding: 5%; + float: left; } \ No newline at end of file -- cgit v1.1