БЛОГ НА HUSL


Как сделать так, чтобы в футере строка не сбивалась при изменении масштаба?

Автор вопроса: Илья

существует такая проблема, в футере, под нижней линией есть контент. Когда окно начинается уменьшаться, 1 из 4 колонок смещается вниз и контент, который находится под чертой уходит вправо и появляется линия горизонтального скролла. Как исправить это? Прикрепляю код и фото.

Как выглядит в нормальном масштабе: введите сюда описание изображения

А так при изменении масштаба:

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

Код: HTML:

.footer-column {
  float: left;
  width: 25%;
  padding: 10px;
  gap: 16px;
  /* margin-top: 16px; */
  margin-bottom: 30px;
}

.footer {
  background: #EBEFEC;
  /* z-index: 2; */
  height: 544px;
  /* margin-left: 30px;
  margin-right: 30px; */
  /* margin-right: 30px; */
  margin-top: 80px;
  padding: 60px 45px;
  padding-right: 30px;
}

.foot-link {
  display: grid;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  padding-top: 16px;
  /* padding-bottom: 16px; */
  /* padding-bottom: 16px ; */
}

.foot-link:hover {
  color: #10C32D;
}

.foot-h3 {
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  /* margin-bottom: 10px; */
}

#footer_column1 {
  /* display: grid; */
  width: 320px;
  height: 344px;
  position: relative;
  /* padding-top: px ; */
  gap: 16px;
  opacity: 0px;
}

#footer_column2 {
  width: 320px;
  height: 344px;
  position: relative;
  top: 40px;
  gap: 16px;
  opacity: 0px;
}

.number {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
  padding-top: 8px;
}


/* #footer_column3{
  width: 320px;
  height: 344px;
  position: relative;
  top: 100px;
  left: 70px;
  gap: 16px;
  opacity: 0px;

}
#footer_column4{
  width: 320px;
  height: 344px;
  position: relative;
  top: 100px;
  left: 70px;
  gap: 16px;
  opacity: 0px;

} */

.for-mar {
  display: grid;
  /* margin: 50px; */
}

.foot_text_p {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #617767;
}

.icon_foot {
  border-radius: 50px;
  background-color: #12E435;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 16px;
}

.icon_foot2 {
  position: relative;
  right: -1px;
}

.icon_foot:hover {
  background-color: #10C32D;
}

.foot_icons {
  display: flex;
  gap: 16px;
  margin-bottom: 60px;
}

#email {
  width: 319px;
  height: Hug (56px)px;
  padding: 16px 15px 16px 15px;
  gap: 4px;
  border-radius: 8px;
  border: 1px;
  opacity: 0px;
  background: url(/img/foot_email_icon.png) no-repeat 285px 14px;
  background-color: #fff;
  margin-top: 16px;
  cursor: pointer;
}

.foot-bottom {
  background-color: #EBEFEC;
  /* padding-left: 45px;
  padding-right: 45px;
  padding-bottom: ; */
  margin-left: 45px;
  margin-right: 45px;
  border-top: 1px solid #BECAC1;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.foo {
  background-color: #EBEFEC;
}

.bottom {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.bottom-text {
  color: #617767;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.bottom:hover {
  color: #10C32D;
}

.text-bottom2 {
  display: flex;
}

.bot-left {
  margin-right: 10px;
}

.bot-right {
  margin-left: 10px;
}
<footer class="foo">
  <div class="footer">
    <div class="footer-column" id="footer_column1">
      <h3 class="foot-h3">О компании</h3>
      <div class="fot-mar">
        <a href="#" class="foot-link">О компании</a>
        <a href="#" class="foot-link">Отзывы и награды</a>
        <a href="#" class="foot-link">Карьера</a>
        <a href="#" class="foot-link">Корпоративное обучение</a>
        <a href="#" class="foot-link">Контакты</a>
        <a href="#" class="foot-link">Задать вопрос</a>
        <a href="#" class="foot-link">Запросить обратный звонок</a>
        <a href="#" class="foot-link">Онлайн-чат</a>
      </div>
    </div>

    <div class="footer-column" id="footer_column2">
      <a href="#" class="foot-link">Каталог</a>
      <a href="#" class="foot-link">Бренды</a>
      <a href="#" class="foot-link">Сотрудничество</a>
      <a href="#" class="foot-link">Сертификаты и лицензии</a>
      <a href="#" class="foot-link">Способы и условия оплаты</a>
      <a href="#" class="foot-link">Варианты доставки и самовывоз</a>
      <a href="#" class="foot-link">Гарантия и возврат</a>
      <a href="#" class="foot-link">Полезная информация</a>
    </div>

    <div class="footer-column" id="footer_column3">
      <h3 class="foot-h3">Контакты</h3>
      <p class="foot-link foot_text_p">(Москва и Московская область)</p>
      <h3 class="number foot-link_1">+7(499)707-71-53</h3>
      <p class="foot-link foot_text_p">(Бесплатно по России)</p>
      <h3 class="number foot-link_1">8-800-505-40-78</h3>
      <a class="foot-link" href="#">Канал WhatsApp</a>
      <a class="foot-link" href="#">Канал Viber</a>
      <a class="foot-link" href="#">Канал Telegram</a>
    </div>

    <div class="footer-column" id="footer_column4">
      <h3 class="foot-h3">Мы в соцсетях</h3>
      <p class="foot-link foot_text_p">Вступите в наши группы в соцсетях,<br> чтобы получать новости и знать <br>о текущих акциях и скидках</p>
      <div class="foot_icons">
        <div class="icon_foot"><img src="/img/footer_icon_1.png"></div>
        <div class="icon_foot "><img class="icon_foot2" src="/img/footer_icon_2.png"></div>
        <div class="icon_foot"><img src="/img/footer_icon_3.png"></div>
        <div class="icon_foot"><img src="/img/footer_icon_4.png"></div>
      </div>
      <div class="foot-search">
        <h3 class="foot-h3">Подписаться на новости</h3>
        <input type="email" alt="Ваш E-mail" id="email" placeholder="Ваш E-mail" pattern=".+@example\.com" size="30" required Type="Fields" state="Default" iconPosition="Right" Title="Off" Description="Off" />
      </div>
    </div>
  </div>

  <div class="foot-bottom">
    <div class="text-bottom">
      <p class="bottom-text"> © 2021 Официальный сайт</p>
    </div>
    <div class="text-bottom2">
      <p class="bottom bottom-text bot-left">Публичная оферта </p>
      <p class="bottom-text">/</p>
      <p class="bottom bot-right bottom-text"> Политика конфиденциальности</p>
    </div>
    <div class="text-bottom">
      <p class="bottom-text bottom"> Создание сайта — Madekruto</p>
    </div>
  </div>


Источник

Ответы (1 шт):

Автор решения: ksa

Когда окно начинается уменьшаться, 1 из 4 колонок смещается вниз и контент, который находится под чертой уходит вправо и появляется линия горизонтального скролла. Как исправить это?

У тебя эти 4 элемента плавающие блоки. Они так себя и ведут, когда не помещаются.

В твоих стилям очень много "мусора". Для решения проблемы можно заменить плавающие блоки на тот же грид. Но все равно нужно что-то делать с колонками по ширине. Т.к. при уменьшении размера сам контент колонок не всегда будет помещаться, в отведенное для него пространство.

.footer-column {
  padding: 10px;
  margin-bottom: 30px;
}

.footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
  background: #EBEFEC;
  height: 544px;
  margin-right: 30px; */
  margin-top: 80px;
  padding: 60px 45px;
  padding-right: 30px;
}

.foot-link {
  display: grid;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  padding-top: 16px;
}

.foot-link:hover {
  color: #10C32D;
}

.foot-h3 {
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}

#footer_column1 {
  height: 344px;
  position: relative;
  gap: 16px;
  opacity: 0px;
}

#footer_column2 {
  height: 344px;
  position: relative;
  top: 40px;
  gap: 16px;
  opacity: 0px;
}

.number {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
  padding-top: 8px;
}

.for-mar {
  display: grid;
}

.foot_text_p {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #617767;
}

.icon_foot {
  border-radius: 50px;
  background-color: #12E435;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 16px;
}

.icon_foot2 {
  position: relative;
  right: -1px;
}

.icon_foot:hover {
  background-color: #10C32D;
}

.foot_icons {
  display: flex;
  gap: 16px;
  margin-bottom: 60px;
}

#email {
  width: 319px;
  height: Hug (56px)px;
  padding: 16px 15px 16px 15px;
  gap: 4px;
  border-radius: 8px;
  border: 1px;
  opacity: 0px;
  background: url(/img/foot_email_icon.png) no-repeat 285px 14px;
  background-color: #fff;
  margin-top: 16px;
  cursor: pointer;
}

.foot-bottom {
  grid-column: span 4;

  background-color: #EBEFEC;
  margin-left: 45px;
  margin-right: 45px;
  border-top: 1px solid #BECAC1;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.foo {
  background-color: #EBEFEC;
}

.bottom {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.bottom-text {
  color: #617767;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.bottom:hover {
  color: #10C32D;
}

.text-bottom2 {
  display: flex;
}

.bot-left {
  margin-right: 10px;
}

.bot-right {
  margin-left: 10px;
}
<footer class="foo">
  <div class="footer">
    <div class="footer-column" id="footer_column1">
      <h3 class="foot-h3">О компании</h3>
      <div class="fot-mar">
        <a href="#" class="foot-link">О компании</a>
        <a href="#" class="foot-link">Отзывы и награды</a>
        <a href="#" class="foot-link">Карьера</a>
        <a href="#" class="foot-link">Корпоративное обучение</a>
        <a href="#" class="foot-link">Контакты</a>
        <a href="#" class="foot-link">Задать вопрос</a>
        <a href="#" class="foot-link">Запросить обратный звонок</a>
        <a href="#" class="foot-link">Онлайн-чат</a>
      </div>
    </div>

    <div class="footer-column" id="footer_column2">
      <a href="#" class="foot-link">Каталог</a>
      <a href="#" class="foot-link">Бренды</a>
      <a href="#" class="foot-link">Сотрудничество</a>
      <a href="#" class="foot-link">Сертификаты и лицензии</a>
      <a href="#" class="foot-link">Способы и условия оплаты</a>
      <a href="#" class="foot-link">Варианты доставки и самовывоз</a>
      <a href="#" class="foot-link">Гарантия и возврат</a>
      <a href="#" class="foot-link">Полезная информация</a>
    </div>

    <div class="footer-column" id="footer_column3">
      <h3 class="foot-h3">Контакты</h3>
      <p class="foot-link foot_text_p">(Москва и Московская область)</p>
      <h3 class="number foot-link_1">+7(499)707-71-53</h3>
      <p class="foot-link foot_text_p">(Бесплатно по России)</p>
      <h3 class="number foot-link_1">8-800-505-40-78</h3>
      <a class="foot-link" href="#">Канал WhatsApp</a>
      <a class="foot-link" href="#">Канал Viber</a>
      <a class="foot-link" href="#">Канал Telegram</a>
    </div>

    <div class="footer-column" id="footer_column4">
      <h3 class="foot-h3">Мы в соцсетях</h3>
      <p class="foot-link foot_text_p">Вступите в наши группы в соцсетях,<br> чтобы получать новости и знать <br>о текущих акциях и скидках</p>
      <div class="foot_icons">
        <div class="icon_foot"><img src="/img/footer_icon_1.png"></div>
        <div class="icon_foot "><img class="icon_foot2" src="/img/footer_icon_2.png"></div>
        <div class="icon_foot"><img src="/img/footer_icon_3.png"></div>
        <div class="icon_foot"><img src="/img/footer_icon_4.png"></div>
      </div>
      <div class="foot-search">
        <h3 class="foot-h3">Подписаться на новости</h3>
        <input type="email" alt="Ваш E-mail" id="email" placeholder="Ваш E-mail" pattern=".+@example\.com" size="30" required Type="Fields" state="Default" iconPosition="Right" Title="Off" Description="Off" />
      </div>
    </div>
  </div>

  <div class="foot-bottom">
    <div class="text-bottom">
      <p class="bottom-text"> © 2021 Официальный сайт</p>
    </div>
    <div class="text-bottom2">
      <p class="bottom bottom-text bot-left">Публичная оферта </p>
      <p class="bottom-text">/</p>
      <p class="bottom bot-right bottom-text"> Политика конфиденциальности</p>
    </div>
    <div class="text-bottom">
      <p class="bottom-text bottom"> Создание сайта — Madekruto</p>
    </div>
  </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.