CSS magic to fix scaling on mobile and Surinamese displays

This commit is contained in:
Jeremy D. Berkleef 2021-08-31 17:00:13 -03:00
parent dbdfacfef6
commit f9fc1e6d81
2 changed files with 45 additions and 5 deletions

View File

@ -1 +1 @@
.navigation{background-color:#292f36;width:100%;margin-bottom:0}#contact-submit:hover{border-color:#2c9091;background-color:#09f}.btn-main:hover{background:#09f;color:#fff}.price-item{background-color:#0d0e0f}.counters-item{}.service-block{background-color:#0d0e0f;box-shadow:5px 5px 5px rgba(44,44,44,.3),13px 13px rgba(33,92,210,.8)}.service-block:hover{background-color:#0d0e0f;box-shadow:5px 5px 5px rgba(44,44,44,.3),13px 13px rgba(0,153,255,.8)}.skill-bar .progress .progress-bar{background:#215cd2}.member-photo .mask{background-color:rgba(33,92,210,.7)}@media(max-width:3840px){.section{padding:100px}.container{max-width:80%}.col-lg-4{flex:0 0 30%;max-width:30%;margin:auto}} .navigation{background-color:#292f36;width:100%;margin-bottom:0}#contact-submit:hover{border-color:#2c9091;background-color:#09f}.btn-main:hover{background:#09f;color:#fff}.price-item{background-color:#0d0e0f}.counters-item{}.service-block{background-color:#0d0e0f;box-shadow:5px 5px 5px rgba(44,44,44,.3),13px 13px rgba(33,92,210,.8)}.service-block:hover{background-color:#0d0e0f;box-shadow:5px 5px 5px rgba(44,44,44,.3),13px 13px rgba(0,153,255,.8)}.skill-bar .progress .progress-bar{background:#215cd2}.member-photo .mask{background-color:rgba(33,92,210,.7)}@media(max-width:3840px){.section{padding:100px}.container{max-width:80%}.col-lg-4{flex:0 0 30%;display:grid;max-width:30%;min-width:10%;margin:auto}}@media(max-width:1920px){.section{padding:100px}.container{max-width:80%}.col-lg-4{flex:0 0 100%;display:grid;max-width:100%;margin:auto}}

View File

@ -50,7 +50,7 @@
padding: 100px; padding: 100px;
} }
.container { .container {
max-width: 80%; max-width: 90%;
} }
.col-lg-4 { .col-lg-4 {
flex: 0 0 30%; flex: 0 0 30%;
@ -59,22 +59,62 @@
min-width: 10%; min-width: 10%;
margin: auto; margin: auto;
} }
.block {
min-height: 390px;
} }
.service-block{
min-height: 360px;
}
}
@media (max-width: 1920px) { @media (max-width: 1899px) {
.section { .section {
padding: 100px; padding: 100px;
} }
.container {
max-width: 100%;
}
.col-lg-4 {
flex: 0 0 33%;
display: grid;
max-width: 30%;
min-width: 10%;
margin: auto;
}
.block {
min-height: 495px;
}
.service-block{
min-height: 488px;
}
}
@media (max-width: 800px) {
.section {
padding: 1%;
}
.container { .container {
max-width: 80%; max-width: 100%;
} }
.col-lg-4 { .col-lg-4 {
padding: 0;
flex: 0 0 100%; flex: 0 0 100%;
display: grid; display: grid;
max-width: 100%; max-width: 100%;
margin: auto; margin: auto;
} }
.block {
min-height: 366px;
}
.service-block {
min-height: 312px;
}
} }