@nickname9
Male

Адаптивная вёрстка и Bootstrap, как для разных размеров экрана задать margin?

Макет в Фигме:
https://www.figma.com/file/nDXdlmr1kCVnWEcnPWtfLg/...

Мои наработки:

Здравствуйте.
Надо сделать так:5d39815fc1e44172853707.png

А получается "как всегда": 5d3989b1cdff0322183294.jpeg

  1. Для XS
    1. Что необходимо сделать, чтобы между карточками, на эране телефона (брейкпоинт xs), был отступ 32px?
    2. Что бы был отступ (margin) от левого края 16px у карточек.
    3. Что бы не было кнопок "Помощь, Рейтинг, Портфолио" на хедере сайта.
    4. Что нужно сделать, чтобы у таблицы появился "overflow: scroll;"?
    5. Как таблицу и две карточки отодвинуть от левого края на 16px?
    6. Отступ (margin) у текста футера был 15px.


  2. Для MD
    1. Что нужно сделать, чтобы у таблицы не отображалось свойство overflow: scroll;?


  3. Для LG:
    1. Что нужно сделать, чтобы у таблицы не отображалось свойство overflow: scroll;?




Поясню: я отрабатываю навыки на своём старом домашнем задании.
  • Вопрос задан
  • 393 просмотра
Пригласить эксперта
Ответы на вопрос 2
@AleksRap
meta name="viewport"... установлен в head? Если нет - добавить
Маргины и паддинги задавать в em
Для различных шрифтов/отступов и т.д использовать медиазапросы с помощью миксинов бустрапа
Ответ написан
Комментировать
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Для адаптива используйте медиазапросы (еще тут можно почитать).

Пример, margin на 20px в обычной версии и 10px для мобильной версии:

.block {
  margin: 20px;
}

@media only screen and (max-width: 767px) {
.block {
  margin: 10px;
}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы