Fix 1912 (#711)

* fix(API-1912): responsive

* fix(API-1912): responsive

Co-authored-by: Samuel Gomis <[email protected]>

Author: samokiss

content/apps/apps.md

@@ -38,6 +38,6 @@
   </div>
   <div class="block-create-app-row block-create-app-text">
     <img class="block-create-app-github" src="/img/icons/icon--github.png" />
-    Interested by the big picture? Check a&nbsp;<span class="block-link"><a href="https://github.com/akeneo/demo-app">PHP App example.</a></span>
+    <p>Interested by the big picture? Check a&nbsp;<span class="block-link"><a href="https://github.com/akeneo/demo-app">PHP App example.</a></span></p>
   </div>
 </div>

styles/apps-homepage.less

@@ -118,9 +118,46 @@
   font-size: 20px;
   line-height: 24px;
   margin: 44px 0 38px 0;
+  p {
+    margin: 0;
+  }
 }
 
 .block-create-app-github {
   width: 36px;
   margin-right: 17px;
 }
+
+
+@media only screen and (max-width: 820px) {
+  .block-about-app img {
+    display: none;
+  }
+
+  .arrow-back img {
+    margin-top: 42px;
+    margin-left: 10px;
+    margin-right: 10px;
+    align-items: center;
+    width: 12px;
+    transform: rotate(180deg);
+  }
+
+  .next-steps-button-number {
+    padding-top: 2px;
+    font-size: 58px;
+  }
+
+  .next-steps-button-text {
+    font-size: 17px;
+  }
+
+  .block-create-app-github {
+    width: 36px;
+    margin-left: 17px;
+  }
+
+  .block-create-app-title {
+    margin-left: 17px;
+  }
+}

styles/nav.less

@@ -259,3 +259,29 @@ ul.nav ul {
 .search-bar{
     width: 100%;
 }
+
+@media only screen and (max-width: 820px) {
+    .search-bar-form {
+        width: 100%;
+    }
+
+    element.style {
+        position: absolute;
+        top: 100%;
+        z-index: 100;
+        left: 0px;
+        right: auto;
+        display: none;
+    }
+    .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+        right: 0!important;
+        left: inherit!important;
+    }
+    .form-group.form-search span {
+        width: 100%;
+    }
+    #algolia-autocomplete-listbox-0 {
+        min-width: 100%;
+        max-width: 100%;
+    }
+}