feat: Aplica css mobile

This commit is contained in:
Sabrina Miranda 2022-12-26 20:47:42 -03:00
parent e1ce6c233a
commit bc99bae4ed
2 changed files with 104 additions and 1 deletions

View File

@ -73,6 +73,27 @@
margin-bottom: 12px;
}
p.client-first-name,
p.client-last-name,
p.client-document,
p.client-phone {
@media (max-width: 1024px) {
width: 49.48%;
}
@media (max-width: 992px) {
width: 49.4%;
}
@media (max-width: 864px) {
width: 49.3%;
}
@media (max-width: 767px) {
width: 49.2%;
}
}
#go-to-shipping {
margin: 0 0 44px 0;
@ -97,6 +118,22 @@
}
}
#client-first-name,
#client-last-name,
#client-document,
#client-phone {
@media (max-width: 1024px) {
width: 100%;
}
}
#client-first-name,
#client-document {
@media (max-width: 1024px) {
margin-right: 14px;
}
}
#opt-in-newsletter,
#state-inscription {
width: 18px;
@ -528,6 +565,10 @@
padding: 24px 34px 0px;
}
@media (max-width: 1024px) {
padding: 0 16px;
}
.ship-country,
.ship-postalCode,
.ship-street,
@ -604,6 +645,10 @@
font-size: 32px;
line-height: 37px;
}
@media (max-width: 1024px) {
margin-top: 24px;
}
}
span {
@ -1031,6 +1076,18 @@
#shipping-data {
margin-bottom: 0;
@media (max-width: 1024px) {
margin: 0;
width: 100%;
}
}
#payment-data {
@media (max-width: 1024px) {
margin: 0;
width: 100%;
}
}
.hproduct {
@ -1305,6 +1362,10 @@
height: 50px;
}
@media (max-width: 767px) {
max-width: 100%;
}
option {
font-size: 14px;
line-height: 18px;
@ -1326,4 +1387,38 @@
}
}
/*url("https://agenciamagma.vteximg.com.br/homeM3Academy.png");*/
.row-fluid .orderform-template.active {
@media (max-width: 1024px) {
display: flex;
}
}
body .container-main.container-order-form .orderform-template.active .orderform-template-holder {
@media (max-width: 1024px) {
width: 100%;
}
}
.row-fluid {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
width: 100%;
}
}
.row-fluid [class*=span]:first-child {
@media (max-width: 1024px) {
width: 100%;
}
}
#postalCode-finished-loading {
@media (max-width: 1024px) {
width: 30.176%;
}
@media (max-width: 600px) {
width: 100%;
}
}

View File

@ -5,8 +5,16 @@ body .container-main.container-order-form .orderform-template.active {
margin-right: 0;
float: right;
@media (max-width: 1024px) {
width: 100%;
}
.description {
margin-top: 0;
@media (max-width: 1024px) {
width: 100%;
}
}
}
.orderform-template-holder {