feat:adicionando estilos no mobile
This commit is contained in:
parent
e17c4ccc25
commit
1f1056cad3
@ -1,24 +1,24 @@
|
||||
import React from 'react';
|
||||
import {useProduct} from 'vtex.product-context';
|
||||
import styles from "./styles.css";
|
||||
|
||||
|
||||
const paymentWithPix =() => {
|
||||
const PaymentWithPix =() => {
|
||||
|
||||
const product = useProduct();
|
||||
|
||||
|
||||
let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.wrapperPix}>
|
||||
<img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
|
||||
<div className={styles.wrapperPrices}>
|
||||
<p className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
|
||||
<p className={styles.wrapperSubtitle}>R$ 10 % de desconto</p>
|
||||
<div className="wrapperPix">
|
||||
<img className="wrapperPixImage" src={imagePix} alt="Imagem do icone do pix" />
|
||||
<div className="wrapperPrices">
|
||||
<p className="wrapperTitle">{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
|
||||
<p className="wrapperSubtitle">R$ 10 % de desconto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default paymentWithPix
|
||||
export default PaymentWithPix;
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
|
||||
.wrapperPix {
|
||||
[class*="wrapperPix"] {
|
||||
display: flex;
|
||||
gap: 26px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.wrapperPixImage {
|
||||
|
||||
[class*="wrapperPixImage"] {
|
||||
width: 66px;
|
||||
height: 24px;
|
||||
}
|
||||
.wrapperPrices {
|
||||
[class*="wrapperPrices"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapperTitle {
|
||||
[class*="wrapperTitle"] {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -25,7 +26,7 @@
|
||||
}
|
||||
|
||||
|
||||
.wrapperSubtitle {
|
||||
[class*="wrapperSubtitle"] {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import paymentWithPix from "./components/Example/paymentWithPix";
|
||||
import paymentWithPix from "./components/Example/PaymentWithPix";
|
||||
|
||||
export default paymentWithPix;
|
||||
|
||||
@ -100,7 +100,8 @@
|
||||
"props": {
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
|
||||
},
|
||||
|
||||
"displayThumbnailsArrows": false,
|
||||
@ -121,9 +122,8 @@
|
||||
"html#codigo",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#selling-price",
|
||||
"example-component",
|
||||
"html#pixzap",
|
||||
"html#product-installments",
|
||||
// "html#pixzap",
|
||||
// "product-separator",
|
||||
// "product-identifier.product",
|
||||
"html#sku-selector",
|
||||
@ -276,7 +276,11 @@
|
||||
"defaultActiveTab": true
|
||||
},
|
||||
"children": [
|
||||
"tab-content.item#home1"
|
||||
"tab-content.item#home1",
|
||||
"tab-content.item#home2",
|
||||
"tab-content.item#home3",
|
||||
"tab-content.item#home4",
|
||||
"tab-content.item#home5"
|
||||
]
|
||||
},
|
||||
|
||||
@ -289,6 +293,42 @@
|
||||
"tabId":"description1"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home2": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description2"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home3": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description3"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home4": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description4"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home5": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description5"
|
||||
}
|
||||
},
|
||||
|
||||
"html#box-buy" : {
|
||||
"props":{
|
||||
@ -345,14 +385,15 @@
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "desktopOnly",
|
||||
"showNavigationArrows": "always",
|
||||
"blockClass": "carousel"
|
||||
}
|
||||
|
||||
},
|
||||
"rich-text#1": {
|
||||
"props": {
|
||||
"text": "Você também pode gostar:"
|
||||
"text": "Você também pode gostar:",
|
||||
"blockClass": "m3-richText"
|
||||
}
|
||||
},
|
||||
|
||||
@ -377,12 +418,12 @@
|
||||
},
|
||||
"children":["product-installments"]
|
||||
},
|
||||
// "html#pixzap": {
|
||||
// "props":{
|
||||
// "testId": "pix-price"
|
||||
// },
|
||||
// "children":["paymentWithPix"]
|
||||
// },
|
||||
"html#pixzap": {
|
||||
"props":{
|
||||
"testId": "pix-price"
|
||||
},
|
||||
"children":["example-component"]
|
||||
},
|
||||
"html#sku-selector": {
|
||||
"props":{
|
||||
"testId": "sku-selector",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"example-component": {
|
||||
"component": "paymentWithPix"
|
||||
"component": "PaymentWithPix"
|
||||
},
|
||||
|
||||
"html": {
|
||||
|
||||
@ -32,4 +32,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexRowContent .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -27,4 +27,10 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.product-identifier__value {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@ -19,4 +19,14 @@
|
||||
color: #575757;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.m3-richText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
}
|
||||
@ -10,6 +10,25 @@
|
||||
/*font*/
|
||||
/*colors*/
|
||||
/* Grid breakpoints */
|
||||
.sliderLayoutContainer--carousel {
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDotsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDot {
|
||||
background: black;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDot--isActive {
|
||||
background: white;
|
||||
border: 0.5px solid black;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--carousel {
|
||||
padding: 24px 62px;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
/* Grid breakpoints */
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -44,9 +44,9 @@
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
.newsletter .container {
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 32px 0 16px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -100,11 +100,6 @@
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: 375px) and (max-width: 1444px) {
|
||||
.stack {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
.shippingTableHead {
|
||||
display: grid;
|
||||
margin-bottom: 15px;
|
||||
@ -161,7 +156,7 @@
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
@ -174,7 +169,7 @@
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
@ -187,7 +182,7 @@
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shareContainer {
|
||||
@ -211,7 +206,7 @@
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
|
||||
@ -320,4 +315,10 @@
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.productBrand--quickview {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
@media (min-width: 637px) and (max-width: 1024px) {
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -20,5 +20,10 @@
|
||||
.flexRowContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.product-identifier__value {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
@ -17,3 +14,9 @@
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.product-identifier__value {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,3 +8,14 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.m3-richText {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,24 @@
|
||||
|
||||
// .sliderLayoutContainer--carousel {
|
||||
// padding: ;
|
||||
// }
|
||||
.sliderLayoutContainer--carousel {
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
|
||||
.paginationDotsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.paginationDot {
|
||||
background: black;
|
||||
}
|
||||
.paginationDot--isActive {
|
||||
background: white;
|
||||
border: 0.5px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width:768px) and (max-width:1024px) {
|
||||
.sliderLayoutContainer--carousel {
|
||||
|
||||
@ -1,58 +1,58 @@
|
||||
.newsletter{
|
||||
background: black;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
margin:0;
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
&:hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
&:hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 32px 0 16px 0;
|
||||
margin:0;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family:'Opens Sans';
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family:'Opens Sans';
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
@ -75,8 +75,8 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
@ -89,10 +89,14 @@
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: 375px) and (max-width:1444px) {
|
||||
.stack {
|
||||
width: 40%;
|
||||
}
|
||||
@media (min-width: 375px) and (max-width: 1444px) {
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1898px) and (max-width: 2000px) {
|
||||
// .carouselGaleryThumbs {
|
||||
// margin-left: 28px;
|
||||
// }
|
||||
}
|
||||
|
||||
// estilização do frete
|
||||
@ -104,7 +108,7 @@
|
||||
}
|
||||
.shippingTableHeadDeliveryName {
|
||||
display: flex;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -113,7 +117,7 @@
|
||||
}
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -122,7 +126,7 @@
|
||||
}
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
display: flex;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -144,40 +148,40 @@
|
||||
grid-area: t;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
grid-area:d;
|
||||
grid-area: d;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
.shippingTableCellDeliveryPrice {
|
||||
grid-area: p;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #AFAFAF;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shareContainer {
|
||||
@ -189,37 +193,37 @@
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: black;
|
||||
:global(.vtex-button__label ){
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Ok";
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Ok";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: #AFAFAF;
|
||||
}
|
||||
color: #afafaf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
:global(.vtex-input) {
|
||||
:global(.vtex-input__label ){
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,11 +234,11 @@
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 49px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
position: relative;
|
||||
right: 49px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -243,7 +247,7 @@
|
||||
.productBrand--quickview {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
@ -254,7 +258,6 @@
|
||||
|
||||
//estilização do container de skus ( tamanhos e cores )
|
||||
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
@ -327,7 +330,10 @@
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.productBrand--quickview{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1024px) {
|
||||
@media (min-width:637px) and (max-width:1024px) {
|
||||
|
||||
// .container {
|
||||
// display: block;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user