updated responsive width layout
This commit is contained in:
@@ -4,6 +4,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -16,22 +17,29 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
|
box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
|
||||||
|
|
||||||
&:nth-child(0) {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// desktop/tablet less wide
|
||||||
@media (max-width: 1200px) and (min-width: 901px) {
|
@media (max-width: 1200px) and (min-width: 901px) {
|
||||||
.client {
|
.buttons .client {
|
||||||
max-width: 400px;
|
width: 400px;
|
||||||
min-height: 400px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// mobile
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.buttons {
|
.buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mobile less wide
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
.buttons .client {
|
||||||
|
width: 400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user