header & clients more responsive
This commit is contained in:
parent
f4d1878e92
commit
dec36f20b1
2 changed files with 42 additions and 31 deletions
|
@ -1,36 +1,7 @@
|
||||||
@import "defs";
|
@import "defs";
|
||||||
|
|
||||||
.client_box {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client_box-left {
|
|
||||||
flex: 38%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client_box-right {
|
|
||||||
flex: 62%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client_box-left-row {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client_box-img {
|
|
||||||
margin: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client_box-text {
|
.client_box-text {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
max-width: 800px;
|
|
||||||
margin: 32px;
|
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
}
|
}
|
||||||
|
@ -43,3 +14,43 @@
|
||||||
left: -16px;
|
left: -16px;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (width > 599px) {
|
||||||
|
.client_box {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_box-right {
|
||||||
|
flex: 62%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_box-left {
|
||||||
|
flex: 38%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_box-left-row {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_box-img {
|
||||||
|
margin: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_box-text {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 600px) {
|
||||||
|
.client_box-text {
|
||||||
|
margin: 0 16px 32px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
@import "defs";
|
@import "defs";
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
margin: 0 auto 16px auto;
|
margin: 0 auto 16px auto;
|
||||||
|
@ -9,12 +11,10 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-logo {
|
#header-logo {
|
||||||
float: left;
|
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-menu ul {
|
#header-menu ul {
|
||||||
float: right;
|
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 9px 0 0 0;
|
margin: 9px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue