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

Разбираемся в CSS
Ответить
Anonymous
 Нижний колонтитул теряет отображение столбцов из-за небольшого 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»