From 3e1a7332a02b32462987ce4b32d3218313232063 Mon Sep 17 00:00:00 2001 From: muli Date: Sun, 23 Jul 2023 14:39:14 +0200 Subject: [PATCH] fix: Mobile Darstellung des Kontaktformulars gefixt. --- assets/css/style.css | 137 +++++++++++++++++++++++++++---------------- 1 file changed, 88 insertions(+), 49 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index eb3002b..d9d7498 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1258,6 +1258,35 @@ footer { margin-top: 0; padding-top: 0; } + + .contact__box { + display: flex !important; + flex-direction: column; + } + + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; + } + + .contact__box .contact_info__box { + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 100%; + max-width: 75ch; + + display: flex; + justify-content: space-between; + } + + .contact__box .contact_form_box { + order: 2; + } } @media screen and (max-width: 959px) and (min-width: 790px) { @@ -1313,36 +1342,32 @@ footer { } .contact__box { - display: block; + display: flex !important; + flex-direction: column; } .contact__box h1 { + transform: translateX(0) rotate(0); color: var(--wtf-orange); - transform: unset; - background-image: unset; - font-size: 3.5rem; - padding: 0 1.5rem; - margin-bottom: 1.25rem; - } - - .contact__box h2 { - margin-bottom: 1.75rem; + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; } .contact__box .contact_info__box { - width: 100%; - margin: 0; - padding: 0 1.5rem; + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + display: flex; - box-sizing: border-box; + justify-content: space-between; } - .contact__box .contact_info__box p { - margin-right: 1.5rem; - } - - .card_grid { - grid-template-columns: 1fr; + .contact__box .contact_form_box { + order: 2; } } @@ -1579,32 +1604,32 @@ footer { } .contact__box { - display: block; + display: flex !important; + flex-direction: column; } .contact__box h1 { + transform: translateX(0) rotate(0); color: var(--wtf-orange); - transform: unset; - background-image: unset; - font-size: 3.5rem; - padding: 0 1.5rem; - margin-bottom: 1.25rem; - } - - .contact__box h2 { - margin-bottom: 1.75rem; + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; } .contact__box .contact_info__box { - width: 100%; - margin: 0; - padding: 0 1.5rem; + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + display: flex; - box-sizing: border-box; + justify-content: space-between; } - .contact__box .contact_info__box p { - margin-right: 1.5rem; + .contact__box .contact_form_box { + order: 2; } /* homepage - end */ @@ -1888,24 +1913,38 @@ footer { display: block; } - .contact__box h1 { - color: var(--wtf-orange); - transform: unset; - background-image: unset; - font-size: 3.5rem; - padding: 0 1.5rem; - margin-bottom: 1.25rem; + .contact__box { + display: flex !important; + flex-direction: column; } - .contact__box h2 { - margin-bottom: 1.75rem; + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; } .contact__box .contact_info__box { - width: 100%; - margin: 0; - padding: 0 1.5rem; - box-sizing: border-box; + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .contact__box .contact_info__box p { + margin-right: 0.5rem; + } + + .contact__box .contact_form_box { + order: 2; } /* homepage - end */