Нужна помощь в получении кнопки с раскрывающимся меню/содержимым для центрирования и перемещения содержимого вниз. ⇐ CSS

[Anonymous]

Я пытаюсь сделать так, чтобы нажимаемая кнопка с раскрывающимся меню располагалась по центру моей страницы по горизонтали, а также чтобы она опускала содержимое под ней, когда моя веб-страница отображается на мобильных устройствах. Когда я пытаюсь display: flex;, flex-direction: columns; кнопка «оглавление» находится по центру, но есть пространство, где содержимое будет заполняться, даже если кнопка находится в закрытое состояние, в котором ничего не отображается. Когда я смотрю на инструменты разработчика, элемент div, в котором находится кнопка, занимает пространство содержимого независимо от того, закрыт он или нет. Единственный способ заставить кнопку занимать подходящее место, когда она закрыта, - это присвоить ей позицию: Absolute;, но контент теперь появляется поверх другого моего контента, а не сдвигается вниз. Любая помощь или предложения?

Код: Выделить всё

.main-article {
align-items: start;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 2fr 1fr;
}

.button-link {
background: none;
border: none;
text-decoration: none;
color: var(--clr-neutral-400);
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
text-align: center;
}

.dropdown.active>.menu-link,
.menu-link:hover {
color: var(--clr-primary-400);
}

.dropdown {
position: relative;
}

.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + .25rem);
background-color: var(--clr-neutral-100);
padding: .75rem;
border-radius: .25rem;
box-shadow: 0 2px 5px 0 rgb(0, 0, 0, .1);
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active>.button-link+.dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

@media (max-width: 48rem) {
.main-article {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr;

}
}

@media (max-width: 48rem) {
.dropdown {
display: flex;
flex-direction: column;
}
}

Мой веб-сайт с возникшей у меня проблемой



Подробнее здесь: https://stackoverflow.com/questions/793 ... entered-an