Mobile ansicht geändert

ui/src/app/app.component.css

@@ -0,0 +1,26 @@
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.wrapper > * {
+    padding: 10px;
+    flex: 1 100%;
+}
+
+.header {
+    background-color: #c6ac87;
+}
+
+.main {
+    text-align: center;
+}
+
+@media all and (min-width: 600px) {
+    
+}
+
+@media all and (min-width:800px) {
+    .main {flex: 3 0px;}
+    .main {order: 2;}
+}

ui/src/app/app.component.html

@@ -1,12 +1,16 @@
-<app-navbar></app-navbar>
 
-<div id="router">
+<div class="wrapper">
+    <header class="header">
+        <app-navbar></app-navbar>
+    </header>
+
+    <article class="main">
         <router-outlet></router-outlet>
+    </article>
 </div>
 
-
+<!--<div class="fixed-bottom">
-<div class="fixed-bottom">
     Damian & Annika
     Dät Haartje 27A
     26683 Saterland
-</div>
+</div>-->

ui/src/app/home/home.component.css

@@ -21,13 +21,36 @@
     top: 50px;
 }
 
-.section-heading-page {
-    width: 100%;
-}
 
 .section-countdown {
     position:relative;
-    top: -170px;
+    top: -180px;
+}
+
+
+.heading-section {
+    background-color :#228fb8;
+    width: 100%;
+    height:150px;
+    position: relative;
+    top: 70%;
+}
+
+
+@media only screen and (max-width: 768px )
+{
+    .heading-section{
+        position: unset;
+        height: fit-content;
+    }
+    .section-name {
+        position: unset;
+    }
+    .section-countdown {
+        display:none;
+        /*position:relative;
+        bottom:auto;*/
+    }
 }
 
 
@@ -35,4 +58,3 @@
 
 
 
-

ui/src/app/home/home.component.html

@@ -10,7 +10,7 @@ Wir möchten euch hier grundlegene Informationen zur Unsere Trauung geben <br />
 <h5>Schauen Sie zu einem Späteren Zeitpunkt nochmal vorbei</h5>
 
 
-<div class="section-heading-page">
+<div class="heading-section">
     <div class="section-name">
         <h1 class="heading-page">Annika &amp; Damian</h1>
         <div class="text-center mt-10">20.08.2022</div>

ui/src/app/navbar/navbar.component.html

@@ -1,4 +1,5 @@
-<nav class="navbar fixed-top navbar-expand-sm justify-content-center navbar-light bg-light">
+<!--<nav class="navbar fixed-top navbar-expand-sm justify-content-center navbar-light bg-light">-->
+  <nav class="navbar navbar-expand-sm justify-content-center navbar-light bg-light">
   <ul class="navbar-nav">
     <li class="nav-item">
       <a class="nav-link" routerLink="/home">Home</a>

ui/src/styles.css

@@ -4,6 +4,7 @@
 html {
     width: 100%;
     
+    
 }
 body {
     font-family: 'Josefin Sans';
@@ -11,11 +12,3 @@ body {
     background-color: #c6ac87;
 }
 
-#router {
-    position: relative;
-    top: 100px;
-    
-    text-align: center;
-    display: flex;
-    justify-content: center;
-}