fix responsive styling

src/components/Search.jsx

@@ -36,7 +36,7 @@ export default function Search(props) {
   }
 
   return (
-    <div className="searchresultContainer">
+    <div className="searchResultContainer">
       <h1>
         <b>Search Results for "{searchParam}"</b>
       </h1>

src/components/profile/Profile.jsx

@@ -62,7 +62,7 @@ export default function Profile(props) {
             <img alt="profile pic" src={user.picture} />
           )}
         </div>
-        <h2>
+        <h2 className="usernameProfile">
           <b>{user.username}</b>
         </h2>
         {isUser && (

src/components/thread/Post.jsx

@@ -100,33 +100,48 @@ export default function Post(props) {
               By{' '}
               <Link to={`/profile/${content.username}/1`}>
                 {content.username}
-              </Link>{' '}
-              - {time}{' '}
+              </Link>{', '}
+              {window.innerWidth < 780 && (
+                <br></br>
+              )}
+              {time}{' '}
             </p>
           </div>
+          
         </div>
 
         
             {content.user_id == AuthService.getCurrentUserId() && (
               <div id="headerButton">
                 <div className="buttonContainer">
-                  <div>
-                    {checkType == 'threads' && (
+                  {checkType == 'threads' && (
+                    <div className="threadButtons">
                       <Button
                         type="button"
                         text="Edit"
                         color="none-green"
                         url={`thread/edit/${content.id}`}
                       />
-                    )}
-                    <button
-                      type="button"
-                      className="deleteButton"
-                      onClick={() => deletePost(user.username)}
-                    >
-                      Delete
-                    </button>
-                  </div>
+                      <button
+                        type="button"
+                        className="deleteButton"
+                        onClick={() => deletePost(user.username)}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  )}
+                  {checkType == 'post' && (
+                    <div classname="commentDeleteButton">
+                      <button
+                        type="button"
+                        className="deleteButton"
+                        onClick={() => deletePost(user.username)}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  )}
                 </div>
             </div>
             )}

src/components/thread/PreviewThread.jsx

@@ -17,7 +17,11 @@ export default function PreviewThread(props) {
         <p>
           By{' '}
           <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
-          - {time} - <i className="far fa-thumbs-up" /> {content.points}
+          {', '}
+          {window.innerWidth < 780 && (
+            <br></br>
+          )}
+          {time} - <i className="far fa-thumbs-up" /> {content.points}
         </p>
       </div>
     </div>

src/styles/App.css

 body {
     min-height: 100vh;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

src/styles/LoginForm.css

@@ -13,6 +13,7 @@
 
 .loginFormContainer h1{
     margin-bottom: 40px;
+    text-align: center;
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

src/styles/Search.css

-.searchresultContainer {
+.searchResultContainer {
     margin: 36px 72px;
     min-height: 100vh;
     margin-bottom: 72px;
+    font-family: "DM Sans";
 }
 
-.searchresultContainer h1{
-    font-family: "DM Sans";
+.searchResultContainer h1{
     font-size: 36px;
     color: #003F5A;
     margin-bottom: 56px;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    .searchresultContainer {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    .searchResultContainer {
         margin: 24px 36px
     }
 
-    .searchresultContainer h1{
+    .searchResultContainer h1{
         font-size: 28px;
         margin-bottom: 36px;
+        text-align: center;
+    }
+
+    .searchResultContainer p{
+        text-align: center;
     }
 }
\ No newline at end of file

src/styles/profile/Profile.css

@@ -33,10 +33,16 @@
     margin-bottom: 28px;
 }
 
+.subHeaderUsername {
+    word-wrap: break-word;
+}
+
 .sub_header_my_threads h3 {
     font-family: "DM Sans";
     font-size: 20px;
     color: #DE6600;
+    word-wrap: break-word;
+    max-width: 60vw;
 }
 
 .userIcon img {
@@ -52,7 +58,13 @@
     color: #DE6600;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+.usernameProfile {
+    max-width: 72vw;
+    word-wrap: break-word;
+    text-align: center;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .profileContainer {
         margin-top: 24px;
         margin-left: 36px;
@@ -70,18 +82,13 @@
 
     .sub_header_my_threads h3 {
         font-size: 18px;
+        text-align: center;
     }
 
     p {
         font-size: 14px;
     }
 
-    .sub_header_my_threads {
-        flex-wrap: wrap;
-    }
-}
-
-@media only screen and (max-device-width : 320px) {
     .sub_header_my_threads {
         flex-wrap: wrap;
         justify-content: center;
@@ -91,4 +98,14 @@
     .my_threads_section p {
         text-align: center;
     }
+
+    .sub_header_my_threads h3 {
+        max-width: 72vw;
+    }
+}
+
+@media only screen and (min-device-width : 540px) and (max-device-width : 600px){
+    .sub_header_my_threads h3 {
+        max-width: 40vw;
+    }
 }
\ No newline at end of file

src/styles/thread/Form.css

 .formContainer {
-    margin: 36px 72px!important;
+    margin: 36px 72px;
     min-height: 100vh;
     margin-bottom: 72px;
 }
@@ -116,9 +116,9 @@ textarea:focus, input:focus, select:focus{
     outline: none;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .formContainer {
-        margin: 18px 36px!important;
+        margin: 18px 36px;
     }
 
     .back {
@@ -127,7 +127,8 @@ textarea:focus, input:focus, select:focus{
     }   
 
     .header {
-        margin-top: 18px!important;
+        margin-top: 18px;
+        text-align: center;
     }
 
     label {
@@ -154,22 +155,22 @@ textarea:focus, input:focus, select:focus{
 
     .title {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
     }
     
     .topic {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
     }
     
     .body {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
     }
     
     .username {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
     }
 
     .buttonContainer {

src/styles/thread/ListThreads.css

@@ -84,7 +84,7 @@
     opacity: 1!important;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .listThreadsContainer {
         margin-top: 24px;
         margin-left: 36px;
@@ -101,6 +101,10 @@
     
     .sub_header_list_threads {
         margin-bottom: 28px;
+        flex-wrap: wrap;
+        justify-content: center;
+        flex-direction: column;
+        justify-content: center;
     }
     
     .tab h3 {
@@ -114,15 +118,6 @@
         font-weight: bold;
         opacity: 1!important;
     }
-}
-
-@media only screen and (max-device-width : 320px) {
-    .sub_header_list_threads {
-        flex-wrap: wrap;
-        justify-content: center;
-        flex-direction: column;
-        justify-content: center;
-    }
 
     .tab h3 {
         font-size: 16px;
@@ -130,8 +125,8 @@
         margin-left: 28px;
         margin-top: 4px;
     }
-    
+
     .recentThreads p, .topThreads p {
         text-align: center;
     }
-}
\ No newline at end of file
+}

src/styles/thread/Post.css

@@ -120,10 +120,10 @@ button:focus {
     align-items: center;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     #post {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
         margin-bottom: 20px;
     }
 
@@ -137,7 +137,7 @@ button:focus {
         margin-top: 24px;
     }
 
-    #headerButton .buttonContainer div{
+    .threadButtons{
         display: flex;
         justify-content: space-between;
         width: 160px;
@@ -157,5 +157,17 @@ button:focus {
         font-size: 14px;
     }   
 
-    
+    .deleteButton {
+        margin-left: 0px;
+    }
+
+    .userImage {
+        display: flex;
+        align-items: center;
+    }
+
+    .commentDeletebutton {
+        display: flex;
+        justify-content: center!important;
+    }
 }
\ No newline at end of file

src/styles/thread/PreviewThread.css

@@ -46,10 +46,10 @@ p {
     margin-bottom: 0px;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     #threadCard {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
         margin-bottom: 20px;
         padding: 16px;
     }

src/styles/thread/Thread.css

 .threadContainer {
     display: flex;
-    justify-content: center;
     flex-direction: column;
     margin-top: 36px;
     font-family: "DM Sans";
@@ -54,7 +53,7 @@
 }
 
 .commentBox {
-    min-width: 303px;
+    min-width: 468px;
     max-width: 3696px;
     font-family: "DM Sans";
     height: 120px;
@@ -89,7 +88,7 @@ textarea:focus {
     flex-direction: column;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .threadContainer {
         margin-top: 24px;
         margin-bottom: 24px;
@@ -109,7 +108,7 @@ textarea:focus {
 
     .commentBox {
         min-width: 248px;
-        max-width: 303px;
+        max-width: 468px;
         height: 120px;
         font-size: 14px;
     }
@@ -128,4 +127,9 @@ textarea:focus {
         margin-bottom: 0px;
         text-align: center;
     }
-}
\ No newline at end of file
+
+    .buttonContainer .button {
+        margin-top: 0px;
+    }
+}
+

src/styles/topic/Topic.css

@@ -59,12 +59,16 @@
     background-color: transparent!important;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .topicContainer {
         margin-top: 24px;
         margin-left: 36px;
         margin-right: 36px;
     }
+
+    .header h1 {
+        margin-bottom: 36px;
+    }
 }
 
 @media only screen and (max-device-width : 320px) {
@@ -72,8 +76,4 @@
         margin-left: 0px;
         margin-top: 18px;
     }
-
-    .header h1 {
-        margin-bottom: 36px;
-    }
 }
\ No newline at end of file

src/styles/topic/TopicList.css

@@ -45,7 +45,12 @@
     margin-bottom: 8px;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+#threadCardHeader #judul{
+    max-width: 192px;
+    word-wrap: break-word;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .button {
         font-size: 16px;
     }
@@ -55,6 +60,11 @@
         min-height: 108px;
     }
 
+    #threadCardHeader #judul{
+        max-width: 152px;
+        word-wrap: break-word;
+    }
+
     .topicContainer h1{
         font-family: "DM Sans";
         font-size: 28px;
@@ -78,9 +88,7 @@
         align-items: center;
         margin-bottom: 24px;
     }
-}
 
-@media only screen and (max-device-width : 320px) {
     .headerTopic {
         display: flex;
         flex-direction: column;
@@ -88,6 +96,22 @@
     }
 
     .headerTopic h1 {
-        margin-bottom: 36px;
+        margin-bottom: 24px;
+    }
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .topics {
+        justify-content: center;
+    }
+
+    .topicCards {
+        justify-content: center;
+    }
+}
+
+@media only screen and (max-device-width : 540px) {
+    .topicCards {
+        justify-content: center;
     }
 }
\ No newline at end of file

src/styles/utility/Button.css

@@ -24,14 +24,9 @@
     background-color: transparent!important;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     .button {
         font-size: 16px;
-    }
-}
-
-@media only screen and (max-device-width : 320px) {
-    .button {
         margin-top: 12px
     }
 }
\ No newline at end of file

src/styles/utility/Navbar.css

@@ -16,6 +16,7 @@
 
 .form-control {
     min-width: 320px;
+    max-width: 400px;
     margin-right: 0px!important;
     border-radius: 0.25rem 0rem 0rem 0.25rem;
     border-color: #FEA02F;
@@ -52,7 +53,7 @@
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .form-control {
         min-width: 180px;
-        max-width: 300px;
+        max-width: 240px;
         margin-right: 0px!important;
         border-radius: 0.25rem 0rem 0rem 0.25rem;
         border-color: #FEA02F;
@@ -62,11 +63,4 @@
         width: 120px;
         height: 29.46px;
     }
-}
-
-@media only screen and (max-device-width : 320px) {
-    .form-control {
-        min-width: 180px;
-        max-width: 240px;
-    }
 }
\ No newline at end of file