адаптирован футер, пофикшено растягивание картинки на фоне

This commit is contained in:
DmitriyB
2022-07-26 16:28:15 +05:00
parent eee43b6341
commit f3db4cd870
4 changed files with 136 additions and 27 deletions
+106 -2
View File
@@ -32,6 +32,19 @@
box-sizing: border-box;
}
.footer-content-contacts-first-container {
flex: 2;
}
.footer-content-contacts-second-container {
flex: 3;
display: flex;
gap: 60px;
/* width: 100%; */
/* justify-content: space-between; */
box-sizing: border-box;
}
.contact-header {
display: flex;
flex-direction: column;
@@ -56,7 +69,7 @@
.contact-container {
width: 100%;
min-width: 255px;
min-width: 230px;
display: flex;
flex-direction: column;
gap: 25px;
@@ -68,17 +81,23 @@
gap: 12px;
font-weight: 400;
font-size: 18px;
line-height: 130%;
line-height: 130%;
}
.contact-data-row {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
.contact-data-value-container {
display: flex;
justify-content: flex-start;
width: 100%;
/* flex-shrink: 0; */
/* min-width: 160px; */
/* flex-shrink: 0; */
}
@media screen and (max-width: 1280px) {
@@ -93,4 +112,89 @@
flex-direction: column;
gap: 40px;
}
.footer-content-container {
gap: 60px;
}
.footer-content-contacts {
gap: 40px;
}
}
@media screen and (max-width: 1024px) {
.footer-container {
padding: 80px 20px 70px 20px;
}
.footer-content-container {
flex-direction: column;
gap: 60px;
flex-wrap: wrap;
}
.footer-content-contacts {
flex-direction: column;
/* justify-content: space-between; */
}
.contact-data-row {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
.contact-data-value-container {
width: 100%;
flex-shrink: 1;
/* min-width: 160px; */
/* flex-shrink: 0; */
}
.footer-content-contacts-second-container {
gap: 40px;
}
}
@media screen and (max-width: 640px) {
.footer-container {
padding: 40px 10px;
}
.footer-content-logo {
width: 40px;
height: 65px;
}
.footer-content-container {
flex-direction: column;
gap: 40px;
}
.footer-content-contacts {
flex-direction: column;
}
.contact-data-row {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
.footer-content-contacts-second-container {
flex-direction: column;
}
.contact-header-title {
font-size: 18px;
}
.contact-data-container {
font-size: 14px;
}
}