Amelioration Responsive Design

index.php

@@ -63,8 +63,7 @@ require 'header.php';
 	}
 
 	.float_message {
-    	position: absolute;
-    	width: 800px;
+    	position: absolute;	
     	top: 120px;
     	right: 80px;
     	z-index: 100;
@@ -73,18 +72,45 @@ require 'header.php';
     	height: 60px;
     	cursor:  pointer;
 	}
+
+	@media only screen and (min-width: 601px){
+		.float_message{
+			width: 800px;
+		}
+	}
+
+	@media only screen and (max-width: 600px){
+		.float_message{
+			width: 245px;
+		}
+	}
 </style>
 
-<div style="position: absolute; top: 40px; left: 80px; cursor: pointer;">
-	<i id="quit" class="material-icons tooltipped" data-position="right" data-tooltip="Changer de salon" style="font-size: 4em">arrow_back</i>
-</div>
+<div class="hide-on-small-only">
+	<div style="position: absolute; top: 40px; left: 80px; cursor: pointer;">
+		<i class="quit material-icons tooltipped" data-position="right" data-tooltip="Changer de salon" style="font-size: 4em">arrow_back</i>
+	</div>
 
-<div style="position: absolute; top: 40px; right: 80px; cursor: pointer;">
-	<i id="reload" class="material-icons tooltipped" data-position="bottom" data-tooltip="Recharger la page" style="font-size: 4em">refresh</i>
+	<div style="position: absolute; top: 40px; right: 80px; cursor: pointer;">
+		<i class="reload material-icons tooltipped" data-position="bottom" data-tooltip="Recharger la page" style="font-size: 4em">refresh</i>
+	</div>
+
+	<div style="position: absolute; top: 40px; right: 160px; cursor: pointer;">
+		<i class="reset material-icons tooltipped" data-position="left" data-tooltip="Reset les lancer" style="font-size: 4em">settings_backup_restore</i>
+	</div>
 </div>
+<div class="hide-on-med-and-up">
+	<div style="position: absolute; top: 100px; left: 80px; cursor: pointer;">
+		<i class="quit material-icons tooltipped" data-position="right" data-tooltip="Changer de salon" style="font-size: 4em">arrow_back</i>
+	</div>
 
-<div style="position: absolute; top: 40px; right: 160px; cursor: pointer;">
-	<i id="reset" class="material-icons tooltipped" data-position="left" data-tooltip="Reset les lancer" style="font-size: 4em">settings_backup_restore</i>
+	<div style="position: absolute; top: 100px; right: 80px; cursor: pointer;">
+		<i class="reload material-icons tooltipped" data-position="bottom" data-tooltip="Recharger la page" style="font-size: 4em">refresh</i>
+	</div>
+
+	<div style="position: absolute; top: 100px; right: 160px; cursor: pointer;">
+		<i class="reset material-icons tooltipped" data-position="left" data-tooltip="Reset les lancer" style="font-size: 4em">settings_backup_restore</i>
+	</div>
 </div>
 
 <main class="container">
@@ -93,7 +119,7 @@ require 'header.php';
 			<h1><b>JdR Roll</b></h1>
 		</div>
 	</div>
-	<form id="form" method="POST" action="./">
+	<form id="form" method="POST" action="./" style="margin-top: 1em">
 		<div class="row">
 			<div class="col m6 s12">
 				<div class="row">