Блог

Я делаю свои первые шаги на этом форуме, потому что надеюсь найти какую-то помощь 🙂

Я объясняю вам свою проблему

Мне нужно выполнить упражнение, в котором кнопка с текстовым поиском в настольной версии должна превратиться в кнопку с логотипом увеличительного стекла, вот и все

ЗА ИСКЛЮЧЕНИЕМ ТОГО, ЧТО

Я не могу разместить эту знаменитую кнопку рядом с полем поиска в мобильной версии

Я присоединяюсь к вам по соответствующим кодам

Большое спасибо!

 lt;div class="formsearch"gt;  lt;div class="titlesearch"gt;  lt;h1 class=""gt;Trouvez votre hébergement pour des vacances de rêvelt;/h1gt;  lt;pgt;En plein centre ville ou en pleine naturelt;/pgt; lt;/divgt; lt;div class="searchbox"gt;  lt;i class="fas fa-map-marker-alt fa-1x"gt;lt;/igt;  lt;input placeholder="Rechercher" type="text"gt;  lt;button class="mobile-hide"gt;Rechercherlt;/buttongt;  lt;div class="display-hide"gt;  lt;button class="mobile-show"gt;lt;i class="fas fa-search"gt;lt;/igt;lt;/buttongt;  lt;/divgt; lt;/divgt;  

ВЕРСИЯ HTML

 .formsearch{  display: flex;  position: relative;  flex-direction: column;  height: 300px;  max-width: 1100px;  margin-right: 20px;  margin-left: 20px;  padding: 0 auto;  overflow: auto;   }     .fa-map-marker-alt {  background-color: var(--background);  width: 8%;  padding: 15px;  border-top-left-radius: 10px;  border-bottom-left-radius: 10px;    }  .searchbox {  padding-top: 30px;  width: 50%;  }  .searchbox input,button {  width: 65%;  border: 2px solid var(--background);  border-right: 0px;  border-left: 0px;  font-size: 15px;  padding: 12px;  }  .searchbox button {  width: 25%;  float: right;  background-color: var(--primary-color);  border-top-right-radius: 10px;  border-bottom-right-radius: 10px;  color: white;  border-left: 0px;  }  .searchbox .display-hide{  display: none;  }  

ВЕРСИЯ CSS (на рабочем столе)

 .formsearch {  margin-right: 20px;  margin-left: 20px;  }    .mobile-hide {  display: none;  }  .searchbox .display-hide{  display: inline-block;  width: 20%;    }  .searchbox {  width: 100%;  }  .fa-map-marker-alt {  width: 20%;  }  .searchbox input,button {  width: 60%;  }  

адаптивная версия