MarcelloMartins/desafio-react-e-typescript-marcello-martins
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(institucional): feat responsivness 4k

Browse Source
This commit is contained in:
Marcello Rodrigues Martins 2023-01-19 18:48:49 -03:00
parent 6bff611363
commit d78ac2ce69
1 changed files with 125 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/pages/Institutional/styles.module.scss
View File

@ -1,7 +1,7 @@
.homeDiv {
display: flex;
margin-top: 29px;
margin-left: 7.81%;
margin-left: 100px;
gap: 10px;
align-items: center;
margin-bottom: 81px;
@ -33,7 +33,7 @@
.layoutPage {
display: flex;
margin-left: 7.81%;
margin-left: 100px;
margin-top: 80px;
margin-bottom: 70px;
@ -132,6 +132,8 @@
height: 46px;
&::placeholder {
display: flex;
align-items: center;
padding: 15px 0 15px 20px;
font-family: "Roboto";
font-weight: 400;
@ -186,3 +188,124 @@
}
}
}
@media screen and (max-width: 1024px) {
.layoutPage {
display: flex !important;
flex-direction: column !important;
margin-left: 0 !important;
margin-bottom: 82px !important;
.layoutText {
max-width: 96.88% !important;
margin: 30px 16px !important;
.layoutH2 {
display: flex;
justify-content: center !important;
margin-top: 0px !important;
}
}
}
.buttonDiv {
width: 96.88% !important;
border-right: 0 !important;
margin: 0 16px !important;
}
.formDiv {
width: 96.98% !important;
margin: 0 16px !important;
.formH2 {
display: flex;
justify-content: center !important;
margin-top: 30px !important;
}
}
}
@media screen and (min-width: 2500px) {
.home {
width: 32px !important;
}
.arrow {
width: 10px !important;
}
.textHome {
font-size: 24px !important;
}
.h1Institucional {
font-size: 48px !important;
}
.buttonLayout {
font-size: 32px !important;
height: 58px !important;
}
.layoutPage {
margin-bottom: 84px !important;
.layoutText {
max-width: 67.2vw !important;
.layoutH2 {
font-size: 48px !important;
}
.layoutP {
font-size: 26px !important;
}
}
.formDiv {
width: 67.2vw !important;
.formH2 {
font-size: 48px !important;
}
.formLabel {
font-size: 28px !important;
}
.formLabelInstagram {
font-size: 28px !important;
}
.formSpan {
font-size: 24px !important;
}
.formField {
height: 63px !important;
&::placeholder {
font-size: 28px !important;
}
}
.formConfirm {
font-size: 28px !important;
.confirmField {
min-width: 1.44vw !important;
}
}
.buttonConfirm {
font-size: 32px !important;
height: 71px !important;
}
.spanConfirm {
font-size: 24px !important;
}
}
}
}