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

Question

[▪ ▪]

Сделал подвал для сайта. Получилось так много элементов что я даже не знаю какой метод использовать для адаптивности. Подскажите как будет логичнее сделать блоки? Использовать flex или какой то другой метод? Или может задавать для каждого блока float left и для каждого делать width 22%?

Answer 1

[Алексей Николаев]

У вас тут явно не 22%, а 4 блока с разной шириной. Флекс необязателен, обычный float будет более чем достаточен. Я делал 4 колонки с определенными классами (col-3, col-2 и т.п.) и на 768px (стандартный брейкпойнт для планшетов) превращал все эти колонки в одну путем растягивания их на 100% ширины.

Answer 2

[Максим]

не знаю использовали ли вы Bootstrap ?
им гораздо проще стилизовать адптивную верстку
www.joomla-study.ru/lessons/adaptivnaya-setka-boot...

Answer 3

[Алексей Сол]

Сделайте флексом, тогда у вас не будет проблем, если высота или ширина блоков изменится в большую/меньшую стороны (до определённого предела).

Answer 4

[2pa]

Лучше в 2к 16 году избавляться от подобных "Больших вещей" сколько мотать придётся и не дай бог ещё на странице погрузка новостей, лента плодит ссылки в том месте где нельзя, будет на каждой странице ничем не мотивированная для поисковиков куча ссылок пусть и на свой сайт, лучше всего выводить информацию о сайте, контакты, форму на отдельную страницу

Answer 5

[Ankhena]

1. Откуда 22%?
2. Новости в подвале? А это точно интересные новости? Если да, то им место не в подвале. А если нет, то и вовсе :)
3. "Основа" это повтор основного меню? В мобильной версии обычно для меню используется гамбургер. Так что этот блок можно скрывать.
4. Что за текст над контактами и его нужность не определить по скрину.

Остается 2 блочика: форма и контакты => ставите одну над другой и дело с концом.

А в общем случае:
флекс и меняете в media количество столбцов в строке, например, за счет ширины.