Нижний колонтитул теряет отображение столбцов из-за небольшого CSS-окна просмотра ⇐ CSS

[Anonymous]

Сейчас у меня есть нижний колонтитул внизу моей страницы. в большом окне просмотра (выше 575 пикселей) все выглядит так, как должно. Я создал медиа-запрос, чтобы уменьшить размер лицевой стороны ниже этой точки останова, но он укладывает две части нижнего колонтитула друг на друга, а не остается рядом в столбцах.
HTML

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

 


[list]
[*]Duluth Location:
[*]6920 Grand Ave, Duluth, MN 55807
[*](218) 606-1150
[*]info@perfecttimingautorepair.com
[/list]


[list]
[*] Superior Location:
[*]4003 E 2ND ST, SUPERIOR, WI 54880
[*](715) 919-1384
[*] info@perfecttimingautorepair.com
[/list]


© Copyright 2024 Perfect Timing Auto Repair. All Rights Reserved.

CSS

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

/* FOOTER CSS */
body > footer > div {
flex: 1;
}
footer {
position: relative;
bottom: 0px;
width: 100%;
text-align: center;
background-color: #20252b;
color: gray;
}

body > footer > div > span.footer-top-left.col-sm-6, body > footer > div > span.footer-top-right.col-sm-6 {
display: flex;
justify-content: center;
}

/* MEDIA QUERIES */
@media (max-width: 575px) {
.login-card {
width: 100%;
}
body > div.login-card.container-lg.mt-5 > form > div > div > input:nth-child(1) ,input.form-control {
width: 100%;
}
.footer-bottom, .footer-top-right, .footer-top-left {
font-size: 0.4rem;

}
}

@media (min-width: 801px) {

footer {
position: absolute;
bottom: 0px;
}
}

Я пробовал использовать flex-direction: columns; на теле и присвоить контейнеру нижнего колонтитула гибкий рост как 1 (решение найдено в Интернете), но у меня это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ewport-css