0

Почему у меня так криво отображается блок на адаптиве?

Должно быть так

введите сюда описание изображения

А получается так

введите сюда описание изображения

Сам сайт ilyin1ib.beget.tech

Код jsfiddle.net/vy4mhun6/

1
  • 1. Приведите код в вопрос. 2. Что конкретно не получается? А то, это выглядит, как - сделай за меня!
    – doox911
    15 июн 2021 в 6:02

2 ответа 2

1

Ради интереса сверстал этот макет -

ссылка на проверенную вёрстку: https://facejsonserver.000webhostapp.com/

let select = `<ul class="choose">
  <li class="result">Choose lang</li>
  <li>rus <img src="https://image.flaticon.com/icons/png/512/555/555451.png" alt=""></li>
  <li>eng <img src="https://image.flaticon.com/icons/png/512/555/555613.png" alt=""></li>
  <li>deo <img src="https://image.flaticon.com/icons/png/512/206/206626.png" alt=""></li>
</ul>`;

document.querySelector(".select").innerHTML = select;

let result = document.querySelector(".result");
let ul = document.querySelector(".choose");

ul.addEventListener("click", function(e) {
  result.innerHTML = e.target.innerHTML;
});
* {
  margin: 0;
  box-sizing: border-box;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  width: 660px;
  margin: 30px auto;
}

.wrapper {
  width: 290px;
  margin: auto;
}

.wrapper_header {
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}

ul {
  list-style: none;
  border: 1px solid #000;
  display: inline-block;
  padding: 0;
  border-radius: 4px;
  width: 100px;
  height: 30px;
  overflow: hidden;
  transition: 0.2s ease;
  padding-bottom: 2px;
}

ul:hover {
  height: 106px;
}

ul li {
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  height: 25px;
  cursor: pointer;
}

ul li:not(:first-child):hover {
  background: #f0f0f0;
}

ul li img {
  display: inline-block;
  width: 30px;
  pointer-events: none;
}

form {
  width: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.name input,
.sub {
  height: 30px;
  border-radius: 4px;
  border: 1px solid #000;
  width: 100%;
}

.flex .select {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: #fff;
}

.flex input {
  height: 30px;
  border-radius: 4px;
  width: 150px;
  border: 1px solid #000;
}

.flex ul {
  align-self: flex-start;
}

.selector {
  text-transform: uppercase;
  padding: 10px 0;
}

.selector span {
  color: red;
}

.sub {
  margin-top: 30px;
  background: #428a60;
  color: #fff;
  border: none;
  outline: none;
}

.sub_wrapper {
  position: relative;
}

form input {
  padding-left: 10px;
}

.sub_wrapper .icon {
  position: absolute;
  top: 40%;
  left: 65%;
  color: #fff;
  font-size: 30px;
}

.item {
  width: 350px;
  height: 300px;
  background: url(https://i.ibb.co/kBBWMC0/pill.png), url(https://i.ibb.co/QjMFXcP/background.jpg);
  background-size: 75% 50%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 30px 130px, 0 0;
}

@media (max-width: 670px) {
  .grid {
    grid-template-columns: 1fr;
    width: 350px;
    padding: 30px 0;
  }
  .wrapper {
    margin-left: auto;
    padding-top: 20px;
  }
}
<div class="center">
  <div class="grid">
    <div class="item"></div>
    <div class="wrapper">
      <div class="outer">
        <p class="wrapper_header">Сделай шаг <br> к выздоровлению</p>
        <form action="">
          <div class="selector">ваше <span>имя</span></div>
          <p class="name">
            <input type="text" placeholder="Алексей">
          </p>

          <div class="selector">ваш <span>телефон</span></div>
          <p class="flex">
            <input type="tel" placeholder="+7(800)800 80 80">
            <span class="select"></span>
          </p>

          <p class="sub_wrapper">
            <input type="submit" value="Заказать" class="sub">
            <span class="icon"> ➝ </span>
          </p>
        </form>
      </div>
    </div>
    <!-- wrapper -->
  </div>
  <!-- grid -->
</div>
<!-- центрирующий элемент-->

0

Надпись reduslim и eco находятся в одном диве? Если да-то нужно менять ширину этого дива

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.