From 8e03c23e15059d4240c31041aef21223a0d5247e Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Sat, 13 Aug 2022 10:33:04 +0200
Subject: [PATCH] change: style for foodcard

---
 src/app/foodcard/foodcard.component.css  | 16 +++++++++++++++-
 src/app/foodcard/foodcard.component.html | 22 ++++++++++++----------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/foodcard/foodcard.component.css b/src/app/foodcard/foodcard.component.css
index 8f4b2e9..f479944 100644
--- a/src/app/foodcard/foodcard.component.css
+++ b/src/app/foodcard/foodcard.component.css
@@ -1,9 +1,23 @@
+.flex {
+	display: flex;
+	justify-content: center;
+}
+
+.button {
+	flex-basis: 15%;
+	margin: 0.5em;
+}
+
 p {
 	font-style: italic;
 	text-align: center;
 }
 
-@media only screen and (min-width: 60.625em) {
+@media only screen and (min-width: 46.875em) {
+	.flex {
+		justify-content: flex-start;
+	}
+
 	.foodcard {
 		max-width: 60em;
 		margin: 0 auto;
diff --git a/src/app/foodcard/foodcard.component.html b/src/app/foodcard/foodcard.component.html
index 09e98d3..bc6f0e1 100644
--- a/src/app/foodcard/foodcard.component.html
+++ b/src/app/foodcard/foodcard.component.html
@@ -1,16 +1,18 @@
 <div cdkDropListGroup class="foodcard">
 	<div *ngFor="let title of foodcard.Titles; let i = index">
 		<app-title [title]="title"></app-title>
-		<button class="button"
-			type="button"
-			(click)="insertMainSection(i)">Einfügen Hauptteil</button>
-		<button class="button"
-			type="button"
-			(click)="removeMainSection(i)">Lösche Hauptteil</button>
-		<button class="button"
-			type="button"
-			id="buttonSubtitle"
-			(click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
+		<div class="flex">
+			<button class="button"
+				type="button"
+				(click)="insertMainSection(i)">Einfügen Hauptteil</button>
+			<button class="button"
+				type="button"
+				(click)="removeMainSection(i)">Lösche Hauptteil</button>
+			<button class="button"
+				type="button"
+				id="buttonSubtitle"
+				(click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
+		</div>
 	</div>
 	<p>Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal</p>
 </div>
-- 
2.39.5