fix the CSS styling when resizing the window

README.md

@@ -115,6 +115,9 @@ V1.0.1:
 - git: implement .gitignore to ignore www/participants, otherwise you can't do torsocks git pull without having to do a git stash
 - py: since .gitignore makes it so that www/participants doesnt exist, automatically create the directory structure from www/.official_participants
 - git: figured out how to have an automatically updated lantern instance via gitignore+cronjob
+
+V1.0.2:
+- php+css : make the css styling not ugly on mobile
 ```
 
 Future Versions:

www/header.php

@@ -60,13 +60,13 @@ if (!preg_match("~^(?:f|ht)tps?://~i", $data[3])) {
 		if ($oldcatname != $data[1]){
 			//echo "<td><tr></tr><tr></tr><tr></tr></td>"; // skip a row if new category
 			//echo "<td><tr></tr><tr></tr><tr></tr></td>"; // skip a row if new category
-			echo  "<td><p><h4>" . $data[1] . ' </h4></p></td>'; // display the category as its the first row with this new category
+			echo  '<td class="category"><p><h4>' . $data[1] . ' </h4></p></td>'; // display the category as its the first row with this new category
 			$oldcatname=$data[1];
 		}else{
 			echo  "<td><p>" . ' </p></td>'; // category is already displayed so skip it (empty cell in category column)
 		}
 
-                    echo "<td>" ; // begin the table cell  
+                    echo '<td class="linktitle"><p class="linktitle">' ; // begin the table cell of link title 
 					if($data[4] == "YES"){
 						echo '<a class="sensitivelink" href="'; // begin a href
 					}else{
@@ -74,7 +74,7 @@ if (!preg_match("~^(?:f|ht)tps?://~i", $data[3])) {
 					}
                     //echo  $data[3] . '"> '; // display the link
                     echo  $urllink . '"> '; // display the link
-                    echo  $data[2]  . ' </a></td><td class="description">'; // display the link title and close the a href  and first cell, open the second cell
+                    echo  $data[2]  . ' </a></p></td><td class="description">'; // display the link title and close the a href  and first cell, open the second cell
                     echo  $data[5] . " </td><td>"; // OPTIONAL: display the description column
                     echo  $data[7] . " </td><td>"; // display the score and close the second cell, open the third cell
 					if($data[6] == "YES"){
@@ -196,8 +196,7 @@ if (($handle = fopen($csvfile, "r")) !== FALSE) {
 
 
 </br>
-
-        <h1><a href="http://git.nowherejezfoltodf4jiyl6r56jnzintap5vyjlia7fkirfsnfizflqd.onion/nihilist/darknet-lantern"><img src="img/lantern project large.png"></a></h1>
+        <h1><a href="http://git.nowherejezfoltodf4jiyl6r56jnzintap5vyjlia7fkirfsnfizflqd.onion/nihilist/darknet-lantern"><img src="img/lantern project large.png" class="projectbanner"></a></h1>
         <p><u>Update Frequency:</u> every 3 hours</p> </br>
 		
 

www/index.php

@@ -11,7 +11,7 @@
     <center>
 
 
-
+<div class="width-class">
 <?php 
 require("header.php");
 	$min_length = 1;
@@ -85,10 +85,11 @@ require("header.php");
 		
 	}
 	else{ // if query length is less than minimum or more than maximum
-		echo '</br></br><img src="img/logo-large.png"><p>Search query must be between '.$min_length . " and ".$max_length . " characters.</p>";
+		echo '</br></br><img src="img/logo-large.png" class="width: 100%"><p>Search query must be between '.$min_length . " and ".$max_length . " characters.</p>";
 		// TODO list the available categories
 	}
 ?>
+</div>
 <?php 
 require("footer.php");
 ?>

www/style.css

@@ -9,6 +9,15 @@
     font-family: 'Source Code Pro', monospace;
 }
 
+.width-class{
+	width: 100%;
+	object-fit: contain;
+}
+
+.projectbanner{
+	max-width: 100%;
+}
+
 .banner{
 	width: 260px;
 	
@@ -30,6 +39,8 @@
 	color: #fc6e02;
 }
 
+
+
 .imgRz{
         width: 100%;
         height: 50%;
@@ -137,7 +148,7 @@ body{
         width: 100%
 }
 
-.column-container{
+.column-contaianer{
         width: 100%;
         height: 100vh;
         display: flex;
@@ -207,7 +218,17 @@ h1,h2,h3,p,td{
 }
 
 .description{
-	max-width: 500px;
+	max-width: 100%;
+	min-width: 50px;
+}
+
+.category{
+	max-width: 80px;
+	word-wrap: break-word;
+}
+.linktitle{
+	max-width: 150px;
+	word-wrap: break-word;
 }
 
 h3,h2{
@@ -222,6 +243,7 @@ border: 3px solid #2f1c44;
 	padding-bottom: 10px;
 }*/
 table {
+	max-width: 100%;
 	/*border: 1px solid #ff0000;*/
     border-collapse: collapse;
 	
@@ -239,6 +261,7 @@ table {
 }
 
 a{
+	word-wrap: break-word;
     text-decoration: none;
     display: inline-block;
     color: #747ff7;