Часта завдання верстки - центрувати контент, а фони розтягувати:
Сайт на мобільних, планшетах і комп'ютерах. Контент по центру, фон тягнеться
Фон у шапки, у плашки під шапкою, фон з травою, сірий фон і фон підвалу тягнуться на всю ширину. Текст на мобільних відсунутий від країв на 20px, на планшетах на 40px, а на робочому столі займає 900px і знаходиться по центру. Більшість адаптивних сайтів зроблено саме так:
- фон завжди по ширині сторінки;
- на мобільних і планшетах є відступи у контенту (можуть бути як в пікселях, так і у відсотках);
- є максимальна ширина, більше контент не повинен бути.
Як це зробити? Якщо фон по ширині, то це фон якогось блоку, який тягнеться на всю ширину. Візьмемо шапку. На мобільних і планшетах можна так:
На мобільних просто додамо паддінгі. Подивіться HTML і CSS в прикладі
Але як на робочому столі зробити, щоб контент не виходив за 900px? Паддінгі вже не підійдуть. Якщо обмежити header по ширині, то фон перестане тягнутися. Обернём вміст шапки і обмежимо обгортку. Розташуємо її по центру:
Для наочності обмежу 500px
До header-wrapper додасться content-wrapper. footer-wraper та інші врапперов. Тому я відразу роблю один блок - wrapper. Який тільки центрує контент. Більше нічого. Ось як:
- Відступи на мобільних;
- відступи побільше на планшетах;
- максимальна ширина і центрування марджінамі.
На мобільних тягнеться. Обмежений по ширині, центрується
У вас складна верстка, тому на мобільних і планшетах ви робите фіксовану ширину? Не питання, просто зафіксуйте ширину на всіх контрольних точках:
У бутстрапа теж є блок, який центрує контент: container.
З любов'ю, ваш Капітан.
Підписуйтесь на телеграм-канал про фронтенд, дизайн, роботу і життя.