change: style for title

diff --git a/src/app/title/title.component.css b/src/app/title/title.component.css
index d45449e85c73e188c8eddcc9664a4bbad111e07c..8693a37d871bf17ba57ace7fba9cf88e07d43668 100644 (file)
--- a/src/app/title/title.component.css
+++ b/src/app/title/title.component.css
@@ -7,9 +7,14 @@
        background-color: #fff6e6;
 }
 
+.flex {
+       display: flex;
+       justify-content: center;
+}
+
 .button {
-       display: inline-block;
-       margin: 0.5em 0;
+       flex-basis: 15%;
+       margin: 0.5em;
 }
 
 .form {
@@ -36,6 +41,10 @@ h1 {
 }
 
 @media only screen and (min-width: 46.875em) {
+       .flex {
+               justify-content: flex-start;
+       }
+
        h1 {
                text-align: left;
        }

diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
index 4b8c3c839e045b2bc78f80cd70cbada6442994ab..1ede06fd0e8daf3b284c6eb012571cb6449a2c25 100644 (file)
--- a/src/app/title/title.component.html
+++ b/src/app/title/title.component.html
@@ -1,8 +1,10 @@
 <div class="title" [class.active]="formTitleVisible">
        <h1>{{title.Title}}</h1>
-       <button class="button"
-               type="button"
-               (click)="editTitle()">Bearbeiten</button>
+       <div class="flex">
+               <button class="button"
+                       type="button"
+                       (click)="editTitle()">Bearbeiten</button>
+       </div>
        <form #formTitle="ngForm" *ngIf="formTitleVisible"
                (keypress)="onKeypressEnter($event)"
                class="form">
@@ -15,11 +17,13 @@
        </form>
        <div *ngFor="let subtitle of title.Subtitles; let i = index">
                <app-subtitle [subtitle]="subtitle"></app-subtitle>
-               <button class="button"
-                       type="button"
-                       (click)="insertSubSection(i)">Einfügen Unterteil</button>
-               <button class="button"
-                       type="button"
-                       (click)="removeSubSection(i)">Lösche Unterteil</button>
+               <div class="flex">
+                       <button class="button"
+                               type="button"
+                               (click)="insertSubSection(i)">Einfügen Unterteil</button>
+                       <button class="button"
+                               type="button"
+                               (click)="removeSubSection(i)">Lösche Unterteil</button>
+               </div>
        </div>
 </div>