TASK: more mobile styling for everything

ParadoxMike · Jan 8, 2020 · c88a309 · c88a309
1 parent e6811df
commit c88a309
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/src/scss/modules/m_demo.scss b/src/scss/modules/m_demo.scss
@@ -3,23 +3,29 @@
     // background-position: center center;
     // background-size: cover;
     background-color: $c-black;
-    height: 650px;
+    // height: 650px;
+    height: auto;
     width: 100%;
     position: relative;
 
     @include media-breakpoint-up(sm) {
-        height: 750px;
+        // height: 750px;
     }
 
     @include media-breakpoint-up(md) {
         height: 100%;
     }
 
     &__info-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 60%;
+        margin: 0 auto;
+        width: 100%;
+
+        @include media-breakpoint-up(md) {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+        }
     }
 }
diff --git a/templates/modules/m_demo.twig b/templates/modules/m_demo.twig
@@ -4,13 +4,16 @@
 
 <div class="m_demo">
     <div class="m_demo__info-container">
-        <div class="row">
-            <div class="col-6">
+        <div class="row mx-0">
+            <div class="col-12 col-md-6  py-300 py-sm-400 px-150 px-sm-250 p-md-0">
                 <h2 class="h1 t-c-white">Erleben Sie pacenote</h2>
                 <p class="p1 t-c-white mb-200">Testen sie wie sich eine Fahrt mit pacenote anfühlt.</p>
-                <button class="btn btn--white">Jetzt ausprobieren</button>
+                <button class="btn btn--white d-none d-md-block">Jetzt ausprobieren</button>
+                <div class="m_demo__mobile-button d-flex justify-content-center d-md-none">
+                    <button class="btn btn--white">Jetzt Viedo ansehen</button>
+                </div>
             </div>
-            <div class="col-6 bg-c-white d-none d-md-block">
+            <div class="col-md-6 bg-c-white d-none d-md-block">
                 <h1 class="h1">Image Placeholder</h1>
             </div>
         </div>

diff --git a/templates/modules/m_image-text-left.twig b/templates/modules/m_image-text-left.twig
@@ -3,11 +3,11 @@
 #}
 
 <div class="m_image-text-left">
-    <div class="m_image-text-left__text d-flex flex-column justify-content-between pt-400 px-250">
-        <div>
+    <div class="m_image-text-left__text d-flex flex-column justify-content-between pt-300 pt-sm-400 px-150 px-sm-250">
+        <div class="mb-150 mb-sm-200 mb-md-0">
             <h2 class="h3">Sicherheit</h2>
             <h3 class="h1">Safe Road®</h3>
-            <p class="p2">Subway tile hammock occupy, ramps copper mug id actually consequat heirloom. Brooklyn cillum paleo brunch snackwave, put a bird on it VHS stumptown. Jianbing tacos fingerstache 90's quinoa farm-to-table put a bird on it before they sold out synth raw denim lo-fi lyft. Aute exercitation aliquip gentrify, deserunt shabby chic neutra taxidermy. Ipsum man bun hella raw denim, laborum hell of fingerstache polaroid kickstarter tofu chillwave master cleanse. Dreamcatcher excepteur ea man braid hashtag gochujang, everyday carry beard.</p>
+            <p class="p2 mb-0">Subway tile hammock occupy, ramps copper mug id actually consequat heirloom. Brooklyn cillum paleo brunch snackwave, put a bird on it VHS stumptown. Jianbing tacos fingerstache 90's quinoa farm-to-table put a bird on it before they sold out synth raw denim lo-fi lyft. Aute exercitation aliquip gentrify, deserunt shabby chic neutra taxidermy. Ipsum man bun hella raw denim, laborum hell of fingerstache polaroid kickstarter tofu chillwave master cleanse. Dreamcatcher excepteur ea man braid hashtag gochujang, everyday carry beard.</p>
         </div>
         <div class="mb-150 d-flex justify-content-center">
             <button class="btn btn--black">BESTELLEN</button>

diff --git a/templates/modules/m_image-text-right.twig b/templates/modules/m_image-text-right.twig
@@ -8,7 +8,7 @@
             <div class="m_image-text-right__image-info pr-100">
                 <h2 class="h2 t-c-white">754.000</h2>
                 <p class="p3 t-c-white mb-0 d-none d-md-inline">Staus auf deutschen Straßen pro Jahr</p>
-                <p class="p3 t-c-white mb-0 d-inline d-md-none">Staus jährlich</p>
+                <p class="p3 t-c-white mb-0 d-inline d-md-none">Staus pro Jahr</p>
             </div>
             <div class="m_image-text-right__image-info m_image-text-right__image-info--middle px-100">
                 <h2 class="h2 t-c-white">6.500 Minuten</h2>
@@ -22,11 +22,11 @@
             </div>
         </div>
     </div>
-    <div class="m_image-text-right__text d-flex flex-column justify-content-between pt-400 px-250">
-        <div>
+    <div class="m_image-text-right__text d-flex flex-column justify-content-between pt-300 pt-sm-400 px-150 px-sm-250">
+        <div class="mb-150 mb-sm-200 mb-md-0">
             <h2 class="h3">Sicherheit</h2>
             <h3 class="h1">Safe Road®</h3>
-            <p class="p2">Subway tile hammock occupy, ramps copper mug id actually consequat heirloom. Brooklyn cillum paleo brunch snackwave, put a bird on it VHS stumptown. Jianbing tacos fingerstache 90's quinoa farm-to-table put a bird on it before they sold out synth raw denim lo-fi lyft. Aute exercitation aliquip gentrify, deserunt shabby chic neutra taxidermy. Ipsum man bun hella raw denim, laborum hell of fingerstache polaroid kickstarter tofu chillwave master cleanse. Dreamcatcher excepteur ea man braid hashtag gochujang, everyday carry beard.</p>
+            <p class="p2 mb-0">Subway tile hammock occupy, ramps copper mug id actually consequat heirloom. Brooklyn cillum paleo brunch snackwave, put a bird on it VHS stumptown. Jianbing tacos fingerstache 90's quinoa farm-to-table put a bird on it before they sold out synth raw denim lo-fi lyft. Aute exercitation aliquip gentrify, deserunt shabby chic neutra taxidermy. Ipsum man bun hella raw denim, laborum hell of fingerstache polaroid kickstarter tofu chillwave master cleanse. Dreamcatcher excepteur ea man braid hashtag gochujang, everyday carry beard.</p>
         </div>
         <div class="mb-150 d-flex justify-content-center">
             <button class="btn btn--black">BESTELLEN</button>