øker responsiviteten til siden

src/summersplash2022/Content.tsx

@@ -22,9 +22,13 @@ const Content = () => {
 
   const [whichButtonSelected, setWhichButtonSelected] = useState('');
   const [isMobile, setIsMobile] = useState(false);
+  const [isPad, setIsPad] = useState(false);
 
   const handleResize = () => {
-    setIsMobile(window.matchMedia('(max-width: 900px)').matches);
+    setIsMobile(window.matchMedia('(max-width: 700px)').matches);
+    setIsPad(
+      window.matchMedia('(min-width: 701px) and (max-width: 1200px)').matches,
+    );
   };
 
   const handleOnClick = (buttonValue: string) => {
@@ -43,6 +47,7 @@ const Content = () => {
     ) {
       setWhichButtonSelected('Formal og verdier');
     }
+    handleOnClick('Formal og verdier');
   }, []);
 
   return (
@@ -93,6 +98,17 @@ const Content = () => {
               <h2 className={style.heading}>Hva går sommerjobben ut på?</h2>
               <div className={style.section2Flex}>
                 <div className={style.section2Text}>
+                  {isPad ? (
+                    <div className={style.officeMapMobile}>
+                      <img
+                        src={norwayMap}
+                        alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen!"
+                        width="100%"
+                      />
+                    </div>
+                  ) : (
+                    <></>
+                  )}
                   <p className={style.section2Paragraph}>
                     En sommerjobb i Variant er en fin mulighet til å anvende det
                     du har lært på skolen i praksis. Det forventes ikke at du er
@@ -101,8 +117,13 @@ const Content = () => {
                     et av de spennende kundeprosjektene vi har. Underveis får du
                     god oppfølging og tilrettelegging fra erfarne konsulenter
                     som ønsker at du lykkes. Sjekk ut{' '}
-                    <a href='https://blog.variant.no/' className={style.blogpostLink}>bloggen vår</a> for å lese
-                    mer om hva årets sommerstudenter jobbet med.
+                    <a
+                      href="https://blog.variant.no/"
+                      className={style.blogpostLink}
+                    >
+                      bloggen vår
+                    </a>{' '}
+                    for å lese mer om hva årets sommerstudenter jobbet med.
                   </p>
 
                   <p className={style.section2Paragraph}>
@@ -135,7 +156,7 @@ const Content = () => {
                     hva Variant står for og tilbyr.
                   </p>
                 </div>
-                {!isMobile ? (
+                {!isMobile && !isPad ? (
                   <img
                     src={norwayMap}
                     alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen"
@@ -199,8 +220,8 @@ const Content = () => {
                   med et megakult og aktuelt prosjekt med god oppfølging, både
                   fra Variant og kunden. Selv om Variant er et konsulentselskap,
                   har de et godt sosialt miljø hvor alle er inkluderende, ivrige
-                  og åpne. Jeg er superfornøyd med at
-                  jeg søkte sommerjobb hos Variant!!”
+                  og åpne. Jeg er superfornøyd med at jeg søkte sommerjobb hos
+                  Variant!!”
                 </p>
                 <p className={style.summerstudentName}>-Swarny</p>
               </div>

src/summersplash2022/index.module.css

@@ -81,6 +81,8 @@
   width: 60%;
   margin-top: 5%;
   margin-bottom: 5%;
+  position: relative;
+  z-index: 2;
   /* or 135% */
 }
 
@@ -214,20 +216,20 @@
 }
 
 .section2Paragraph {
-  width: 74%;
-}
-
-.section2Text {
-  width: 60%;
+  width: 100%;
 }
 
 .section2Flex {
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
 
 .officeMapMobile {
-  display: none;
+  display: block;
+  position: static;
+  margin: 0;
+  width: 100%;
 }
 
 /* Section 3 styling */
@@ -368,21 +370,17 @@
 
 .flexTimeline {
   display: flex;
+  flex-direction: row;
   align-items: flex-start;
   justify-content: left;
+  gap: 1em;
 }
 
 .timeLine {
   display: flex;
   justify-content: center;
 }
 
-.søknadstips {
-  margin-top: 20%;
-  margin-top: 120px;
-  margin-bottom: 30%;
-}
-
 .section5Div1 {
   width: 50%;
 }
@@ -392,6 +390,14 @@
   padding-top: 10%;
 }
 
+.søknadstips {
+  position: relative;
+  left: 0px;
+  right: 5px;
+  bottom: 850px;
+  z-index: 1;
+}
+
 /* Section 6 styling*/
 
 .section6 {
@@ -519,7 +525,6 @@
 
 .whyWorkAtVariant {
   background-color: #fff3f2;
-  height: 1000px;
 }
 
 .handbookGrid {
@@ -562,6 +567,7 @@
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
+  font-weight: bold;
 }
 
 .handbookButton2 {
@@ -587,6 +593,7 @@
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
+  font-weight: bold;
 }
 
 .handbookButton3 {
@@ -612,6 +619,7 @@
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
+  font-weight: bold;
 }
 
 .handbookButton4 {
@@ -637,6 +645,7 @@
   text-align: left;
   cursor: pointer;
   white-space: nowrap;
+  font-weight: bold;
 }
 
 .section5HandbookLinkMobile {
@@ -693,12 +702,6 @@
     overflow: hidden;
   }
 
-  .søknadstips {
-    position: relative;
-    left: 0px;
-    right: 5px;
-  }
-
   .section6 {
     height: 1100px;
   }
@@ -721,7 +724,6 @@
     position: static;
     margin: 0;
     width: 100%;
-    /* bottom: 50px; */
   }
 
   .officeMapSVG {
@@ -797,7 +799,7 @@
   }
 
   .flexTimeline {
-    display: block;
+    flex-direction: column;
   }
 
   .section5ParagraphLeft {
@@ -848,12 +850,13 @@
 
   .timeLine {
     position: relative;
-    bottom: 400px;
+    bottom: 800px;
     margin-top: 0%;
   }
 
   .søknadstips {
-    bottom: 400px;
+    margin-top: 50px;
+    padding-bottom: 50px;
   }
 
   /* Section 1 mobile*/
@@ -993,14 +996,15 @@
   .summerstudent1Paragraph,
   .summerstudent2Paragraph,
   .summerstudent3Paragraph {
-    position: static;
+    position: relative;
     width: 80%;
     height: fit-content;
     font-family: 'Graphik Web';
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 18px;
+    z-index: 2;
   }
 
   .summerstudent1Paragraph {
@@ -1295,8 +1299,18 @@
   }
 }
 
-@media (max-width: 900px) and (min-width: 720px) {
+@media (max-width: 1100px) and (min-width: 720px) {
   .EvenPicture {
     width: 35%;
   }
+  .timeLine {
+    position: relative;
+    bottom: 900px;
+  }
+  .Marius {
+    left: 60%;
+  }
+  .flexTimeline {
+    display: block;
+  }
 }

src/summersplash2022/nyutdannet/nyutdannet.module.css

@@ -299,13 +299,13 @@ p {
 /* Section 6 */
 .flexTimeline {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
-  gap: 2rem;
+  gap: 50px;
 }
 
 .section6Div {
   width: 48%;
-  height: 1200px;
   z-index: 1;
 }
 
@@ -339,7 +339,13 @@ p {
   z-index: -2;
   right: 45%;
   transform: scale(0.5);
-  bottom: 33%;
+  bottom: 600px;
+}
+.section6 {
+  height: 2200px;
+}
+.timeLineBlack {
+  margin-left: 100px;
 }
 
 /* Section 7 */
@@ -442,7 +448,7 @@ p {
   /* Section 6 */
   .flexTimeline {
     width: auto;
-    display: block;
+    flex-direction: row;
   }
 
   .readMoreArrowWhite {
@@ -454,12 +460,7 @@ p {
   }
 
   .section6Div {
-    height: 1000px;
-    width: auto;
-  }
-
-  .section6 {
-    height: auto;
+    width: 100%;
   }
 
   .section6 p:nth-child(1),
@@ -772,7 +773,7 @@ p {
 
   /* Section 6 */
   .section6 {
-    height: 1900px;
+    height: 2000px;
   }
 
   .section6 p:nth-child(1),