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

Question

[Denis]

Макет в Фигме:

https://www.figma.com/file/nDXdlmr1kCVnWEcnPWtfLg/...

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

• HTML: https://cloud.mail.ru/public/2SD9/3R73kYhib
• CSS: https://cloud.mail.ru/public/RUDo/2TfMuWpmr

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

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

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;?
      
   
   
   

Поясню: я отрабатываю навыки на своём старом домашнем задании.

Answer 1

[Алексей]

meta name="viewport"... установлен в head? Если нет - добавить
Маргины и паддинги задавать в em
Для различных шрифтов/отступов и т.д использовать медиазапросы с помощью миксинов бустрапа

Answer 2

[Иван В]

Для адаптива используйте медиазапросы (еще тут можно почитать).

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

.block {
  margin: 20px;
}

@media only screen and (max-width: 767px) {
.block {
  margin: 10px;
}
}

Comments

[Алексей]

Изменять нужно не отступы, а размер шрифта. Отступы записать через em, тогда они изменятся автоматически

[Иван В]

Алексей,
В любом случае нормальный адаптив без знания медиазапросов не сделать. Отступы для примера.

[Denis]

Привет. Что нужно сделать, чтобы у таблицы не отображалось свойство overflow: scroll; для брейкпоинтов lg и md?