Improve support responsiveness

digitalservicebund · Sep 24, 2024 · 4057330 · 4057330
1 parent fdb356e
commit 4057330
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/dito/app/resources/content.ts b/packages/dito/app/resources/content.ts
@@ -1065,7 +1065,7 @@ export const support = {
   subtitle:
     "Nutzen Sie unsere digitale Expertise, um Ihr Regelungsvorhaben digitaltauglich zu gestalten und den Digitalcheck erfolgreich zu erfüllen.",
   socialProof: {
-    text: `Wir, die Digital-Expert:innen des DigitalService,<br />haben bereits über <span class="text-[65px] -top-[11px] h-[30px] inline-block relative overflow-visible align-top">70</span> **Regelungsvorhaben** unterstützt.`,
+    text: `Wir, die Digital-Expert:innen des DigitalService,<br class="sm:max-lg:hidden" /> haben bereits über <span class="text-[65px] -top-[11px] h-[30px] inline-block relative overflow-visible align-top">70</span> **Regelungsvorhaben** unterstützt.`,
 
     image: {
       src: "/assets/images/support.jpeg",

diff --git a/packages/dito/app/routes/unterstuetzung/route.tsx b/packages/dito/app/routes/unterstuetzung/route.tsx
@@ -84,25 +84,25 @@ export default function Index() {
           <div className="py-48 lg:w-1/2 lg:self-center">
             <RichText
               markdown={socialProof.text}
-              className="text-3xl leading-10 w-[370px]"
+              className="text-3xl leading-10 w-[370px] sm:max-lg:w-[480px]"
             />
           </div>
           <div className="max-sm:hidden relative max-lg:mb-48 lg:w-1/2">
-            <div className="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 lg:w-[60vw] xl:w-[50vw] lg:overflow-y-hidden">
+            <div className="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 max-lg:w-[630px] lg:w-[60vw] xl:w-[50vw] lg:overflow-y-hidden">
               <SocialProofImage />
             </div>
-            <div className="absolute left-40 bottom-40 max-w-[400px] p-16 bg-white/70 backdrop-blur rounded-lg">
+            <div className="absolute left-40 bottom-40 max-w-[400px] p-16 bg-white/70 backdrop-blur rounded-lg max-lg:hidden">
               <Testimonial />
             </div>
           </div>
         </Container>
       </Background>
       <div className="sm:hidden">
         <SocialProofImage />
-        <Container>
-          <Testimonial />
-        </Container>
       </div>
+      <Container additionalClassNames="lg:hidden">
+        <Testimonial />
+      </Container>
       <Container paddingTop="48">
         <Header
           heading={{