change: style for foodcard

diff --git a/src/app/foodcard/foodcard.component.css b/src/app/foodcard/foodcard.component.css
index 8f4b2e99a58d2e6106a785fa0a0a83d7ad073d65..f4799449ee3cfdc7963908566d40587ef0ddf361 100644 (file)
--- 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 09e98d374a58d2e5cbafb794ba4626757f033483..bc6f0e1b3439dd8ca5922b7792926a2a6d638e39 100644 (file)
--- 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>