Changement CSS pour mobile

css/style.css

@@ -47,17 +47,36 @@ header {
 .navbar {
     border-bottom: var(--border-header-footer);
 }
+#logo-small-screen {
+    display: none;
+}
+@media (max-width: 463px) {
+    #logo {
+        display: none;
+    }
+    .navbar-brand {
+        width: 30%;
+    }
+    #logo-small-screen {
+        display: inline-block;
+        width: 80%;
+    }
+}
 .nav-link {
     text-align: center !important;
 }
 
 /* CONTENT */
+@media (max-width: 576px) {
+    .container {
+        width: 90% !important;
+    }
+}
 .container {
     padding-bottom: 25px;
 }
 .inlineInput {
     width: 25% !important;
-    display: inline;
 }
 #convertIn {
     width: 6.7em;

incl/header.php

@@ -53,7 +53,10 @@
             <nav class="navbar navbar-expand-lg navbar-dark static-top">
                 <div class="container" id="header-container">
                     <!-- Brand -->
-                    <a class="navbar-brand" href="/index.php"><img src="/img/FunctionProject_brand-logo.png" alt="FunctionProject"></a>
+                    <a class="navbar-brand" href="/index.php">
+                        <img id="logo" src="/img/FunctionProject_brand-logo.png" alt="FunctionProject">
+                        <img id="logo-small-screen" src="/img/FunctionProject_icon.png" alt="FunctionProject">
+                    </a>
 
                     <!-- Hamburger icon on Mobile -->
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>