Make registration page responsive.

src/components/DateAndPlace.scss

@@ -1,9 +1,8 @@
 @import '../colors.scss';
 
-.dateAndPlace {
+.DateAndPlace {
   text-align: center;
   text-transform: uppercase;
-  font-size: calc(10px + 2vmin);
   margin-bottom: 1rem;
 
   h2 {
@@ -30,3 +29,6 @@
     }
   }
 }
+
+@media screen and (max-width: 600px) {
+}

src/components/DateAndPlace.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 export const DateAndPlace = (props: { size: string }) => {
   return (
-    <div className='dateAndPlace'>
+    <div className='DateAndPlace'>
       <h2 className={props.size}>
         <FormattedMessage id='common.datetime' />
       </h2>

src/components/LanguagePicker.scss

@@ -1,6 +1,6 @@
 @import '../colors.scss';
 
-h1 {
+.LanguagePicker {
   text-align: center;
   color: $brown-text !important;
   font-family: 'Montserrat-Medium';
@@ -16,3 +16,9 @@ h1 {
     background-color: #e4e4de;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .LanguagePicker {
+    font-size: 1.6rem;
+  }
+}

src/components/LanguagePicker.tsx

@@ -1,13 +1,15 @@
 import { useRecoilState } from 'recoil';
 import { currentLanguage } from '../atoms/language';
-import "./LanguagePicker.scss"
+import './LanguagePicker.scss';
 
 export const LanguagePicker = () => {
-    const [lang, setLang] = useRecoilState(currentLanguage)
+  const [lang, setLang] = useRecoilState(currentLanguage);
 
-    return (
-        <h1>
-            <button onClick={e => setLang("fi")}>fi</button> | <button onClick={e => setLang("sk")}>sk</button> | <button onClick={e => setLang("en")}>en</button>
-        </h1>
-    )
-}
+  return (
+    <h1 className='LanguagePicker'>
+      <button onClick={(e) => setLang('fi')}>fi</button> |{' '}
+      <button onClick={(e) => setLang('sk')}>sk</button> |{' '}
+      <button onClick={(e) => setLang('en')}>en</button>
+    </h1>
+  );
+};

src/components/RegForm.scss

@@ -71,3 +71,10 @@ form#registration {
     background-color: $background !important;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .submitButton {
+    max-width: 100%;
+    white-space: break-spaces;
+  }
+}

src/components/RegistrationHeader.scss

@@ -20,3 +20,20 @@
     }
   }
 }
+
+@media screen and (max-width: 600px) {
+  .Diamond {
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .App-header {
+    flex-direction: column;
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: -3rem;
+    }
+  }
+}