Задать вопрос
scoffs

scoffs

Fullstack | C# | Student
Ответы пользователя по тегу HTML

  • Как прекрипить футер к самому нижу?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Прежде всего хочу сказать, что в вашем коде есть намёк на БЕМ и вы даже используете SCSS, но при этом вы вообще не используете переиспользование БЭМ-классов. Почитайте, пожалуйста, об этой методологии и избавьтесь от каши в стилях.

    Ответ на ваш вопрос:
    https://dimox.name/press_footer_bottom_with_css/

    <body>
  <header>
    <!-- Ваш хедер -->
  </header>

  <main>
    <!-- Основной контент страницы -->
  </main>

  <footer>
    <!-- Ваш футер -->
  </footer>
</body>

    *, *::before, *::after { 
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  flex: 1; /* Расширяет основной контент на все доступное пространство */
}

header, footer {
  flex-shrink: 0; /* Предотвращает сжатие хедера и футера */
}
    Ответ написан

  • Как сделать "квадраты" одного размера?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Одно из возможных решений заменить grid на flex:
    .services-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

    Удалите свойство grid-template-columns из .services-content.
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать такие блоки?

    scoffs
    @scoffs
    Fullstack | C# | Student
    На первых двух скринах подойдет displey: flex
    На третьем было бы неплохо увидеть полный скрин, в теории там просто текст по центру, а названия планет через positio: absolute
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно расположить элементы через стили?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Тебе не что-то типа этого надо? 
    <div class="parent-span">
  <span class="child-span">Дочерний span</span>
  Родительский span
</div>

    .parent-span {
  display: flex;
  justify-content: center;
}

.child-span {
  align-self: flex-start;
}
    Ответ написан
    Комментировать
    Комментировать