Responsive styling

pages/index.tsx

@@ -19,7 +19,9 @@ export default function Index() {
             height={237}
             loading='lazy'
           />
-          <h1 className={styles.title}>Kauppa&Ravintola&Kahvila&Baari</h1>
+          <h1 className={styles.title + ' ' + styles.underLogo}>
+            Kauppa&Ravintola&Kahvila&Baari
+          </h1>
         </header>
 
         <section className={styles.sectionContainer}>
@@ -42,7 +44,6 @@ export default function Index() {
               <Image
                 className={styles.socialMediaIcon}
                 src='/fb-icon.png'
-                layout='responsive'
                 alt='facebook'
                 width={300}
                 height={300}
@@ -53,7 +54,6 @@ export default function Index() {
               <Image
                 className={styles.socialMediaIcon}
                 src='/insta-icon.png'
-                layout='responsive'
                 alt='facebook'
                 width={300}
                 height={300}
@@ -87,7 +87,6 @@ export default function Index() {
           <Image
             className={styles.menuImage}
             src='/restaurant.webp'
-            layout='responsive'
             alt='restaurant'
             width={506}
             height={89}
@@ -123,8 +122,8 @@ export default function Index() {
         <section className={styles.sectionContainer}>
           <h1 className={styles.title}>Teemme yhteistyötä</h1>
           <Image
+            className={styles.collaborationImage}
             src='/collaboration.png'
-            layout='responsive'
             alt='yhteystyö'
             width={496}
             height={326}

styles/Index.module.scss

@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  max-width: 80%;
 }
 
 .sectionContainer {
@@ -29,8 +30,17 @@
   margin-top: 1rem;
 }
 
+@media screen and (max-width: 600px) {
+  .address {
+    max-width: 120%;
+    margin-bottom: 1rem;
+  }
+}
+
 .mainLogo {
   margin-top: -1rem;
+  max-width: 120%;
+  height: 100%;
 }
 
 .title {
@@ -42,6 +52,12 @@
   letter-spacing: normal;
 }
 
+@media screen and (max-width: 600px) {
+  .underLogo {
+    font-size: 1.1rem;
+  }
+}
+
 .keepersImage {
   max-width: 150px;
   margin-top: 1.5rem;
@@ -56,12 +72,13 @@
   display: flex;
   justify-content: space-around;
   margin-top: 1rem;
+  width: 50%;
 }
 
 .socialMediaIcon {
   max-width: 30px;
-  margin: 15px;
   margin-bottom: 0;
+  height: 100%;
 }
 
 .postServiceDesc {
@@ -92,6 +109,8 @@
 
 .menuImage {
   margin-bottom: 1rem;
+  max-width: 100%;
+  height: 100%;
 }
 
 .menuLink {
@@ -121,9 +140,20 @@
   margin-bottom: 0;
 }
 
+.collaborationImage {
+  max-width: 100%;
+  height: 100%;
+}
+
 .googleMaps {
   border: 0;
   width: 100%;
   height: 30rem;
   margin: 5% 20% 0% 20%;
 }
+
+@media screen and (max-width: 600px) {
+  .googleMaps {
+    height: 15rem;
+  }
+}

styles/globals.scss

@@ -5,19 +5,10 @@ body {
   font-family: 'Quicksand';
   letter-spacing: 0.8px;
   scroll-behavior: smooth;
+  text-align: center;
 }
 
 @font-face {
   font-family: 'Quicksand';
   src: url('/Quicksand-VariableFont_wght.ttf');
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: black;
-    background: white;
-  }
-}