Enhancements for mobile

Author: seaxwi

index.html

@@ -63,10 +63,12 @@ <h1>Projects</h1>
 
     <div class="wrapper">
       <div class="box">
+        <div class="project-title-box">
+          <h3 class="project-item project-title">Djupviks Hamn</h3>
+        </div>
         <div class="project-top">
           <img class="project-image" src="djupvik.png" alt="">
           <div class="flex-col">
-            <h3 class="project-item project-title">Djupviks Hamn</h3>
             <p class="project-item">Tech: HTML, CSS, Javascript</p>
             <p class="project-item">Website with responsive CSS and JS-navbar.</p>
           </div>
@@ -77,12 +79,16 @@ <h3 class="project-item project-title">Djupviks Hamn</h3>
         </div>
       </div>
       <div class="box">
+        <div class="project-title-box">
+          <h3 class="project-item project-title">seaxwi.github.io</h3>
+        </div>
         <div class="project-top">
+
           <img class="project-image" src="seaxwi.png" alt="">
           <div class="flex-col">
-            <h3 class="project-item project-title">seaxwi.github.io</h3>
-          <p class="project-item">Tech: HTML, CSS</p>
-          <p class="project-item">Personal webpage built mainly in pure HTML/CSS with some JS-enhancements.</p>
+
+            <p class="project-item">Tech: HTML, CSS</p>
+            <p class="project-item">Personal webpage built mainly in pure HTML/CSS with some JS-enhancements.</p>
           </div>
         </div>
         <div class="project-bottom">

styles/style.css

@@ -20,7 +20,7 @@ body {
 h1 {
   text-align: center;
   color: white;
-  font-size: 300%;
+  font-size: 3em;
   margin: 0em;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -29,7 +29,7 @@ h1 {
 #name {
   text-align: center;
   color: white;
-  font-size: 300%;
+  max-width: 100vw;
   margin-top: 4em;
 }
 
@@ -169,7 +169,9 @@ div.contact-box {
 .wrapper {
   display: grid;
   grid-gap: 1em;
-  grid-template-columns: repeat(auto-fit, minmax(450px, 500px));
+  /* grid-auto-columns: minmax(450px, auto); */
+  grid-template-columns: repeat(auto-fit, minmax(350px, auto) );
+
   color: #444;
   margin: auto;
   padding: 0em 0em;
@@ -182,6 +184,7 @@ div.contact-box {
   border-radius: 5px;
   padding: 20px;
   font-size: 120%;
+  /* max-width: 100vw; */
 }
 
 .flex-col {
@@ -197,14 +200,30 @@ div.contact-box {
 
 .project-item {
   margin-bottom: 0.5em;
+
+  word-wrap: break-word;
+
+  font-size: 80%;
+
+  /* break long words */
   /*
-  display: flex;
-  flex-wrap: wrap;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
   */
 }
 
 .project-title {
-  font-size: 150%;
+  font-size: 180%;
+  font-family: monospace;
+  margin-bottom: 0.8em;
+}
+
+.project-title-box {
+  text-align: center;
+  margin: auto;
 }
 
 .project-info {
@@ -219,7 +238,8 @@ div.contact-box {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-
+  max-width: 400px;
+  word-wrap: break-word;
   /* float: left; */
 }