Адаптивная верстка - footer c применением flex

@Semenov Alex · Регистрация: 27.06.2016

Студворк — интернет-сервис помощи студентам

Доброе время суток!
За ранее благодарен, тому кто откликнется!
footer с применением flex-ов, при сжатии ведет себя не корректно!

Подскажите где причина и как ее устранить!?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>foiNNI</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="style_normalize_font/normalize.css">
    <link rel="stylesheet" href="style_normalize_font/font.css">
    <link href="https://fonts.googleapis.com/css?family=Exo:400,900|Pacifico|Roboto+Slab:100,400|Roboto:100,300,400,500" rel="stylesheet">
    <link rel="stylesheet" href="style_normalize_font/style.css">
</head>
<body>
<footer>
    <div class="contact-us">
        <div class="footer-columns">
            <h6>About Us</h6>
            <p>Lorem ipsum dolor sit amet, consectetitecto beatae vitae dicta sunt explicabo.
                magni dolores eos qui ratione voluptatem sequi nesciunt.
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                adipisci velit, sed quia non numquam eius modi tempuaerat voluptatem.</p>
        </div>
        <div class="footer-columns">
            <h6>Quick Links</h6>
            <nav class="navigation">
                <ol>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">pricing</a></li>
                    <li><a href="#">contact Us</a></li>
                </ol>
                <ol>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Manipulation</a></li>
                </ol>
            </nav>
        </div>  
        <div class="footer-columns">
            <h6>Find Us On</h6>
            <div class="social-icons">
                <a href="http://facebook.com"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                <a href="http://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                <a href="http://plus.google.com"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                <a href="http://linkedin.com"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            </div>
            <h6>Subscribe Our Newsletter</h6>
            <form action="#" class="e-mail">
                <input type="email" name="email" placeholder="Your Email" title="Enter your email">
                <input type="submit" value="Subscribe" title="Click to subscribe">
            </form>
        </div>
    </div>
</footer>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
footer {
    max-width: 1600px;
    margin: 0 auto;
    background: #0b0a0a;
}
.contact-us {
    max-width: 1170px;
    margin: 0 auto;
    padding: 36px 69px;
    justify-content: space-between;
    display: flex;
}
.footer-columns h6 {
    color: #fff;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 18px;
}
.footer-columns p {
    font-family: "Roboto-Thin", sans-serif;
    font-size: 14px;
    color: #8f8e91;
    width: 309px;
    padding-top: 20px;
    line-height: 30px;
}
footer .navigation ol li a {
    font-family: "Roboto-Thin", sans-serif;
    font-size: 14px;
    color: #8f8e91;
    border-bottom: transparent;
    cursor: pointer;
    text-decoration: none;
}
.footer-columns nav {
    margin-right: 0;
    padding-top: 20px;
    width: 250px;
    line-height: 30px;
    display: flex;
}
.footer-columns nav ol li {
    list-style-type: none;
}
.social-icons {
    padding-top: 25px;
    width: 200px;
    margin-bottom: 25px;
}
.social-icons a {
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    border: 3px solid #8f8e91;
    color: #8f8e91;
    font-size: 14px;
    padding: 8px;
    margin-right: 8px;
}
.e-mail {
    margin-top: 18px;
}
.e-mail input {
    background-color: transparent;
    border: 2px solid #8f8e91;
    color: #8f8e91;
    font-size: 14px;
    font-family: "Roboto-Thin", sans-serif;
    padding: 17px 8px;
    outline: none;
    width: 80%;
    margin-bottom: 18px;
}
.e-mail input[type="submit"] {
    font-family: "Roboto-Light", sans-serif;
    font-size: 16px;
    color: #ffffff;
    background-color: #1dde85;
    padding: 14px 20px;
    outline: none;
    cursor: pointer;
    border: 1px solid #1dde85;
    width: 113px;
}
@media(max-width: 1120px) {
    .contact-us {
        flex-direction: column;
    }
    .footer-columns {
        text-align: -webkit-center;
        padding-bottom: 40px;
    }
    .social-icons {
        margin-bottom: 55px;
    }
    .navigation {
        text-align: -webkit-left;
    }
    .e-mail input[type="email"] {
        width: 250px;
        margin-right: 10px;
    }
}

@aj17 · 29.04.2017, 16:42

Сообщение от Semenov Alex

footer с применением flex-ов, при сжатии ведет себя не корректно!

в чем именно проблема?

@Semenov Alex · 29.04.2017, 17:39 **[ТС]**

Навигационное меню при сжатии, начинает ломаться....
Каким-то кривым становится!

@aj17 · 29.04.2017, 18:18

Если речь идет про это.
То все очень просто, у вас фиксированные элементы, с шириной, больше, чем нужно)

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Semenov Alex 0 / 0 / 1 Регистрация: 27.06.2016 Сообщений: 37
	29.04.2017, 17:39 [ТС]
	Навигационное меню при сжатии, начинает ломаться.... Каким-то кривым становится! 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	29.04.2017, 18:18
	Сообщение было отмечено Semenov Alex как решение Решение Если речь идет про это. То все очень просто, у вас фиксированные элементы, с шириной, больше, чем нужно) Миниатюры 2

Адаптивная верстка - footer c применением flex

Решение