Поддержка Проблемы и решения Пропала верстка.

  • Страница сделана так HTML

    <div class="my-flex-cont">
    <div class="my-flex-box">
    <div class="slider"><img class="aligncenter wp-image-91" src="https://skand.doctor10.net/wp-content/uploads/2023/08/Скандинавская-ходьба-300x300.png" alt="" width="380" height="380" /></div>
    <div class="header1">
    <h2>СКАНДИНАВСКАЯ ХОДЬБА</h2>
    </div>
    <div class="paragraph">История этого удивительного явления не большая.
    Всего 20 лет.</div>
    </div>
    <div class="my-flex-box">
    <div class="slider">[metaslider id=52]</div>
    </div>
    <div class="my-flex-box">
    <div class="header1">
    <h2>ТРЕНЕРЫ</h2>
    </div>
    <div class="header1">
    <h2>ИНТЕНТАРЬ</h2>
    </div>
    <div class="header1">
    <h2>ТЕХНИКА ХОДЬБЫ</h2>
    </div>
    <div class="header1">
    <h2>РЕАБИЛИТАЦИЯ</h2>
    </div>
    </div>
    </div>
    <div class="my-flex-cont1">
    <div class="my-flex-box">
    <h3>ДЛЯ ДЕТЕЙ</h3>
    </div>
    <div class="my-flex-box">
    <h3>СПЕЦИАЛЬНО ДЛЯ ПОЖИЛЫХ</h3>
    </div>
    </div>

    CSS

    .my-flex-cont {
     display: flex;
     justify-content: center;
     height: 800px;
      border: 3px solid #591911;
     margin:auto;
      width:100%;
    }
    .my-flex-box {
    	margin: 5px;
    	padding: 5px;
    	flex: 0 1 auto;
        border: 1px solid #137872;
      text-align:center;
    }
    .slider
    {
      border: 1px solid #9c681a;
      margin:15px;
    }
    .header-l
    {
    border:solid 1px #9c681a;
     margin:5px;
      text-align: center;
       height:auto; 
      }
    .paragraph 
    {
    border:solid 1px #9c681a;
      margin:5px;
      text-aling:left;
    }
    .my-flex-cont1
    {
      display: flex;
      		flex-direction:column;
    width:65%;
       border: 5px solid #9e244f; 
      margin-left:35%;
      margin-top:5px;
      height:220px;
     }
     h2
    {
    font-family:Intel One Mono;
      font-size:22px;
      color:#2F4F4F;
        padding:10px;
    }
    h3
    {
     font-family:Montserrat Medium;
      font-size:20px;
      color:#2F4F4F;
        padding:10px;
    }

    предварительно страница сверстaна здесь https://codepen.io/aeafjusm/pen/GRwwoeq

    • Тема изменена 9 месяцев, 2 недели назад пользователем intman1958.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • div {
      width: 200px;
      height: 200px;
      position: relative;
      padding: 10px;
      font-family: sans-serif;
    }

    уберите это

    tuxfighter, спасибо . Все вренулось, только слайдер показывает картинки в полный размер. Почему этот блоквсе испортил? Думал использовать его в шапке, чтобы сделать вот какую кострукцию.

    • Ответ изменён 9 месяцев, 2 недели назад пользователем intman1958.

    Почему этот блоквсе испортил?

    У вас все построено на див`ах и он применил свои размеры к каждому диву, где это не было указано.

    Класс ему добавьте, что бы он работал только с нужными дивам

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тема «Пропала верстка.» закрыта для новых ответов.