changed layout to grid

resources/less/metager/pages/donation.less

@@ -9,16 +9,9 @@
     }
     .section {
         .card-light;
-        margin: 8px 0;
+        margin: 0;
     }
 
-    .col-left .section{
-        margin: 8px;
-        margin-left: 0;
-        @media(max-width: @screen-small){
-            margin-right: 0;
-        }
-    }
     #direct-payment > p {
         margin: 0;
     }
@@ -145,5 +138,27 @@
     #amount-custom:checked + label{
         line-height: 21px;
     }
+
+    #content-container {
+        margin-top: 8px;
+        display: grid;
+        grid-template-columns: 1fr 300px;
+        grid-template-rows: auto auto 1fr;
+        grid-template-areas: "form ." "form ." "form .";
+        gap: 8px 8px;
+        @media(max-width: 860px){
+            grid-template-rows: 1fr auto;
+            grid-template-areas: "form form" ". .";
+        }
+        @media(max-width: 740px){
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr auto auto;
+            grid-template-areas: "form " "." ".";
+        }
+
+        .form {
+            grid-area: form;
+        }
+    }
 }
       
\ No newline at end of file

resources/views/spende/spende.blade.php

@@ -13,9 +13,9 @@
             'beitrittlink' => LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/beitritt')
             ])</p>
     </div>
-    <div class="two-col">
+    <div id="content-container">
         @if (app('request')->input('method') == "paypal")
-        <form class="col-left" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+        <form class="form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
             <div class="section">
                 <h3>{!! trans('spende.headline.5') !!}</h3>
                 <div id="payment-methods">
@@ -42,7 +42,7 @@
             </div>
         </form>
         @elseif ((app('request')->input('method') == "bank-transfer"))
-        <div class="section">
+        <div class="section form">
             <h3>{!! trans('spende.headline.5') !!}</h3>
             <div id="payment-methods">
                 <a class="payment-label" href="?method=debit">{!! trans('spende.head.lastschrift') !!}</a>
@@ -60,7 +60,7 @@
             </p>
         </div>
         @else
-        <form class="col-left" method="post">
+        <form method="post" class="form">
             <div class="section">
                 <h3>{!! trans('spende.headline.5') !!}</h3>
                 <div id="payment-methods">
@@ -120,22 +120,20 @@
             </div>	
         </form>
         @endif
-        <div class="col-right"> 
-            <div class="section">
-                <p>{!! trans('spende.lastschrift.10') !!}</p> 
-            </div>
-            <div class="section">
-                <h3>{!! trans('spende.member.1') !!}</h3>
-                <p>{!! trans('spende.member.2') !!}</p>
-                <ul>
-                    <li>{!! trans('spende.member.3') !!}</li>
-                    <li>{!! trans('spende.member.4') !!}</li>
-                    <li>{!! trans('spende.member.5') !!}</li>
-                    <li>{!! trans('spende.member.6') !!}</li>
-                </ul>
-                <a class="btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}">{!! trans('spende.member.7') !!}</a>
-            </div>	
+        <div class="section">
+            <p>{!! trans('spende.lastschrift.10') !!}</p> 
         </div>
+        <div class="section member">
+            <h3>{!! trans('spende.member.1') !!}</h3>
+            <p>{!! trans('spende.member.2') !!}</p>
+            <ul>
+                <li>{!! trans('spende.member.3') !!}</li>
+                <li>{!! trans('spende.member.4') !!}</li>
+                <li>{!! trans('spende.member.5') !!}</li>
+                <li>{!! trans('spende.member.6') !!}</li>
+            </ul>
+            <a class="btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}">{!! trans('spende.member.7') !!}</a>
+        </div>	
     </div>
 </div>
 @endsection