Some Updates regarding to the header for more responsiveness

public/assets/css/style.css

@@ -2448,4 +2448,81 @@ section {
     text-align: center;
     font-size: 13px;
     color: #003056;
+}
+
+
+
+/*--------------------------------------------------------------
+# Header
+--------------------------------------------------------------*/
+#header{
+    padding-left:0px !important;
+}
+@media (max-width: 1237px) {
+
+    #citydemText{
+
+        font-size: 22px !important;
+    }
+    #logoDrees{
+        width: 130px !important;
+    }
+    #logoICity{
+        width: 120px !important;
+    }
+}
+
+@media (max-width: 763px) {
+
+    #citydemText{
+
+        font-size: 12px !important;
+    }
+    #logoDrees{
+        width: 100px !important;
+    }
+    #logoICity{
+        width: 90px !important;
+    }
+}
+
+@media (max-width: 576px){
+    #leftBorder{
+        display: none;
+    }
+    #rightBorder{
+        display: none;
+    }
+    #TextBorder{
+        width: 50%;
+    }
+    #LogoBorder{
+        width: 50%;
+    }
+}
+
+@media (max-width: 457px){
+    #leftBorder{
+        display: none;
+    }
+    #rightBorder{
+        display: none;
+    }
+    #TextBorder{
+        width: 60%;
+    }
+    #LogoBorder{
+        width: 40%;
+    }
+    #citydemText{
+
+        display:none !important;
+    }
+
+    #logoDrees{
+        width: 90px !important;
+    }
+    #logoICity{
+        width: 70px !important;
+    }
 }
\ No newline at end of file

public/index.html

@@ -44,25 +44,26 @@
         <!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->
 
         <div class="row">
-            <div class="col-lg-1 col-md-2 col-sm-2 ">
+            <div id="leftBorder" class="col-lg-1 col-md-1 col-sm-1 ">
                 <img src="assets/img/dummy.png" alt="">
             </div>
-            <div class="col-lg-5 col-md-4 col-sm-4">
+            <div id="TextBorder" class="col-lg-5 col-md-5 col-sm-5">
                 <a href="index.html" class="logo d-flex align-items-center">
                     <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt="">
-                    <span>City Demonstrator</span>
+                    <span id="citydemText">City Demonstrator</span>
+
                 </a>
             </div>
 
-            <div class="col-lg-5 col-md-4 col-sm-4 ">
+            <div id="LogoBorder" class="col-lg-5 col-md-5 col-sm-5 ">
                 <span style="float: right; margin-top: 10px;">
-                        <img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">
+                        <img id="logoDrees" src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">
                     
-                        <img src="assets/img/icityLogo.svg " style="width: 140px;  " alt=" ">
+                        <img id="logoICity" src="assets/img/icityLogo.svg " style="width: 140px;  " alt=" ">
                     </span>
 
             </div>
-            <div class="col-lg-1 col-md-2 col-sm-1">
+            <div id="rightBorder" class="col-lg-1 col-md-1 col-sm-1">
                 <img src="assets/img/dummy.png" alt="">
             </div>
         </div>