Скриване на елементи

Най-важното за скриването на елементи

При responsive дизайн често се налага да скрием по-малко важна информация на малки екрани. Има два основни начина за това – чрез display: none и visibility: hidden, но те не работят по един и същи начин.
visibility: hidden скрива елемента визуално, но той запазва мястото си в подредбата.
display: none премахва елемента от подредбата и останалите елементи заемат неговото място.

Стъпка по стъпка: скриване при ширина под 800px

1. Създайте @media правило за екрани с ширина под 800px.
2. Таргетирайте елемента, който искате да скриете (например aside в main).
3. Добавете display: none;, за да премахнете колоната напълно при малък екран.
4. Тествайте като намалите ширината на прозореца – колоната ще изчезне и съдържанието ще се пренареди.
5. Заменете с visibility: hidden;, за да видите разликата – елементът ще стане невидим, но ще запази мястото си.
6. Пробвайте и с вътрешен елемент (например ol), за да наблюдавате ефекта върху подредбата.

Използвани CSS свойства и селектори

• display: none – премахва елемента от визуалния поток и освобождава мястото му.
• visibility: hidden – прави елемента невидим, но запазва мястото му.
• @media (max-width: 800px) – прилага стилове само при ширина под 800px.
• Селектор за съседен елемент (напр. h2.Languages + ol) – таргетира конкретен списък след заглавие.

Задача

Скрийте второстепенен елемент от вашата страница при ширина под 600px. Тествайте и двата подхода (display: none и visibility: hidden) и наблюдавайте как се променя подредбата на останалото съдържание.