From c96695bd399efc9242c6784fe197c01cbc2cf58f Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 4 Feb 2023 10:23:58 -0300 Subject: [PATCH 1/7] feat: adicionando testId: tab-layout --- store/blocks/pdp/product-tab-layout.jsonc | 7 +++++++ store/blocks/pdp/product.jsonc | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc index 0738bfe..96cde4c 100644 --- a/store/blocks/pdp/product-tab-layout.jsonc +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -7,6 +7,13 @@ } }, + "html#tab-layout#description": { + "props": { + "testId": "tab-layout" + }, + "children": ["tab-layout#description"] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4f469ce..a943307 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", "condition-layout.product#availability", // "flex-layout.row#description", - "tab-layout#description", + "html#tab-layout#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", // "shelf.relatedProducts", From 7e22220dfdc46890b9203ccd99901aa2b6e30373 Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 4 Feb 2023 10:26:11 -0300 Subject: [PATCH 2/7] =?UTF-8?q?refactor(product-image.jsonc):=20modificand?= =?UTF-8?q?o=20aspectRatio=20do=20product-images=20para=20op=C3=A7=C3=A3o?= =?UTF-8?q?=20phone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product-image.jsonc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-image.jsonc b/store/blocks/pdp/product-image.jsonc index a2b4ccb..4c56abd 100644 --- a/store/blocks/pdp/product-image.jsonc +++ b/store/blocks/pdp/product-image.jsonc @@ -10,7 +10,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "displayThumbnailsArrows": false, "showPaginationDots": false, From e354a770e350e5c805f6cf02847699d25296b5e1 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 5 Feb 2023 09:06:50 -0300 Subject: [PATCH 3/7] style: corrigindo tamanho das imagens do Product Images --- styles/css/vtex.store-components.css | 91 ++----------------- .../vtexStore/vtex.store-components.scss | 78 ++++------------ 2 files changed, 25 insertions(+), 144 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8f920ed..ced891c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -57,7 +57,7 @@ } @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; + width: 99.67% !important; margin-left: 0; margin-right: 0; } @@ -65,79 +65,28 @@ .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { margin: 0; } -@media (max-width: 2560px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { - margin: 0; - height: 944px !important; - } -} -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { - height: 944px !important; - } -} .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { object-fit: unset !important; max-height: unset !important; - height: 664px !important; } @media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: 944px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: auto; - } -} -@media (max-width: 768px) and (min-width: 377px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - width: 99.67% !important; - min-height: 296px !important; - object-fit: cover !important; - height: auto !important; - } -} -@media (max-width: 377px) and (min-width: 376px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - width: 99.67% !important; - min-height: unset !important; - height: 296px !important; - object-fit: cover !important; + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } } @media (max-width: 1920px) and (min-width: 1024px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 664px; + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } } @media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 944px; + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } } @media (max-width: 768px) and (min-width: 375px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 296px; + .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } } .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { @@ -695,7 +644,6 @@ .productImagesContainer--image-description { width: 92.93%; - height: 632px; max-height: unset; position: relative; margin-left: 32px; @@ -703,13 +651,11 @@ @media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer--image-description { width: 94.784%; - height: 872px; } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; - height: 944px; margin-left: 0; margin-bottom: 16px; } @@ -717,29 +663,10 @@ @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { width: 100%; - height: auto; margin-left: 0; margin-bottom: 16px; } } -.productImagesContainer--image-description .productImage--image-description { - height: 632px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer--image-description .productImage--image-description { - height: 872px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer--image-description .productImage--image-description { - height: 944px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .productImagesContainer--image-description .productImage--image-description { - height: auto; - } -} .productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { object-fit: cover !important; max-height: unset !important; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index 1466697..3eefbff 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -54,66 +54,34 @@ margin-right: 0; } @media (max-width: 768px) and (min-width: 375px) { - width: 100%; + width: 99.67% !important; margin-left: 0; margin-right: 0; } .productImagesGallerySlide { margin: 0; - @media (max-width: 2560px) and (min-width: 1920px) { - height: 904px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - margin: 0; - height: 944px !important; - } - .productImage { - @media (max-width: 2561px) and (min-width: 1920px) { - height: 904px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px !important; - } - .productImageTag--main { object-fit: unset !important; max-height: unset !important; - height: 664px !important; - @media (max-width: 2561px) and (min-width: 1920px) { - height: 904px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: auto; - } - @media (max-width: 768px) and (min-width: 377px) { - width: 99.67% !important; - min-height: 296px !important; - object-fit: cover !important; - height: auto !important; - } - @media (max-width: 377px) and (min-width: 376px) { - width: 99.67% !important; - min-height: unset !important; - height: 296px !important; - object-fit: cover !important; - } } } - .productVideo, - .videoContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - height: 664px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; - } - @media (max-width: 768px) and (min-width: 375px) { - height: 296px; + + .productVideo { + .videoContainer { + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 50% !important; + } + @media (max-width: 1920px) and (min-width: 1024px) { + padding: 50% !important; + } + @media (max-width: 1025px) and (min-width: 768px) { + padding: 50% !important; + } + @media (max-width: 768px) and (min-width: 375px) { + padding: 50% !important; + } } } } @@ -662,37 +630,23 @@ .productImagesContainer--image-description { width: 92.93%; - height: 632px; max-height: unset; position: relative; margin-left: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; - height: 872px; } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; - height: 944px; margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { width: 100%; - height: auto; margin-left: 0; margin-bottom: 16px; } .productImage--image-description { - height: 632px; - @media (max-width: 2561px) and (min-width: 1920px) { - height: 872px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; - } - @media (max-width: 768px) and (min-width: 375px) { - height: auto; - } & .productImageTag--image-description--main { object-fit: cover !important; max-height: unset !important; From 94c99356d8f88cbcfadb22b562e50329cefd699a Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 5 Feb 2023 09:09:22 -0300 Subject: [PATCH 4/7] =?UTF-8?q?refactor(product-image.jsonc):=20modificand?= =?UTF-8?q?o=20aspectRatio=20do=20product-images=20para=20op=C3=A7=C3=A3o?= =?UTF-8?q?=20phone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product-image.jsonc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-image.jsonc b/store/blocks/pdp/product-image.jsonc index 4c56abd..fc00f26 100644 --- a/store/blocks/pdp/product-image.jsonc +++ b/store/blocks/pdp/product-image.jsonc @@ -10,7 +10,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "auto" + "phone": "1:1" }, "displayThumbnailsArrows": false, "showPaginationDots": false, From 0344e5d24f42755b9a5845c222aeb4e34deb5258 Mon Sep 17 00:00:00 2001 From: devartes Date: Sun, 5 Feb 2023 09:11:56 -0300 Subject: [PATCH 5/7] style: corrigindo width do .listItem --- styles/css/vtex.tab-layout.css | 4 ++-- styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 35b32a6..9881fdb 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -64,13 +64,13 @@ } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem { - width: 82px; + width: 100%; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem { - width: 82px; + width: 100%; margin-bottom: 16px; } } diff --git a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss index 938d9fe..aa5ed62 100644 --- a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss @@ -41,11 +41,11 @@ width: 142px; } @media (max-width: 1025px) and (min-width: 768px) { - width: 82px; + width: 100%; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { - width: 82px; + width: 100%; margin-bottom: 16px; } :global(.vtex-button) { From ab112e96b05945bd16af55d1367fcdd4c6e2a6b9 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 08:26:37 -0300 Subject: [PATCH 6/7] style: corrigindo tamanho da imagem do Product Images --- styles/css/vtex.store-components.css | 43 ++++--------------- .../vtexStore/vtex.store-components.scss | 32 +++----------- 2 files changed, 14 insertions(+), 61 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ced891c..1aacdd0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -41,53 +41,26 @@ width: auto; padding: 0; } -@media (max-width: 1920px) and (min-width: 1024px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; - } +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + margin-left: 0; + margin-right: 0; } @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { width: 99.67% !important; - margin-left: 0; - margin-right: 0; } } .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { margin: 0; } .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - object-fit: unset !important; + object-fit: cover !important; max-height: unset !important; + aspect-ratio: 1/1; + width: 100% !important; } -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { - padding: 50% !important; - } -} -@media (max-width: 1920px) and (min-width: 1024px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { - padding: 50% !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { - padding: 50% !important; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { - padding: 50% !important; - } +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { margin-top: 16px; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index 3eefbff..70d0754 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -43,45 +43,25 @@ width: auto; padding: 0; .productImagesGallerySwiperContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - width: 100%; - margin-left: 0; - margin-right: 0; - } - @media (max-width: 1025px) and (min-width: 768px) { - width: 100%; - margin-left: 0; - margin-right: 0; - } + margin-left: 0; + margin-right: 0; @media (max-width: 768px) and (min-width: 375px) { width: 99.67% !important; - margin-left: 0; - margin-right: 0; } .productImagesGallerySlide { margin: 0; .productImage { .productImageTag--main { - object-fit: unset !important; + object-fit: cover !important; max-height: unset !important; - + aspect-ratio: 1/1; + width: 100% !important; } } .productVideo { .videoContainer { - @media (max-width: 2561px) and (min-width: 1920px) { - padding: 50% !important; - } - @media (max-width: 1920px) and (min-width: 1024px) { - padding: 50% !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - padding: 50% !important; - } - @media (max-width: 768px) and (min-width: 375px) { - padding: 50% !important; - } + padding: 50% !important; } } } From 88b063d04d02cf0f76adc53265f0d5aa9897e336 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 09:04:13 -0300 Subject: [PATCH 7/7] style: corrigindo largura do Resultado Frete --- styles/css/vtex.store-components.css | 37 +++---------------- .../vtexStore/vtex.store-components.scss | 24 ++---------- 2 files changed, 9 insertions(+), 52 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1aacdd0..921f1e8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -519,25 +519,10 @@ } .shippingTable .shippingTableHead .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; } -@media (max-width: 2561px) and (min-width: 1920px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 10% 5.6% 12.5%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 9.6% 5.5% 11.5%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 30% 18% 39%; - } -} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -572,26 +557,11 @@ } .shippingTable .shippingTableBody .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; } -@media (max-width: 2561px) and (min-width: 1920px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 10% 5.6% 12.5%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 9.6% 5.5% 11.5%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 30% 18% 39%; - } -} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -611,6 +581,9 @@ color: #afafaf; padding: 0; } +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { + white-space: nowrap; +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { display: none; } diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index 70d0754..f3176c5 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -516,18 +516,9 @@ display: block; .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; - @media (max-width: 2561px) and (min-width: 1920px) { - grid-template-columns: 10% 5.6% 12.5%; - } - @media (max-width: 1025px) and (min-width: 768px) { - grid-template-columns: 9.6% 5.5% 11.5%; - } - @media (max-width: 768px) and (min-width: 375px) { - grid-template-columns: 30% 18% 39%; - } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -565,19 +556,10 @@ .shippingTableBody { .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; - @media (max-width: 2561px) and (min-width: 1920px) { - grid-template-columns: 10% 5.6% 12.5%; - } - @media (max-width: 1025px) and (min-width: 768px) { - grid-template-columns: 9.6% 5.5% 11.5%; - } - @media (max-width: 768px) and (min-width: 375px) { - grid-template-columns: 30% 18% 39%; - } .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -597,6 +579,7 @@ color: #afafaf; padding: 0; .shippingTableLabel { + white-space: nowrap; .shippingTableRadioBtn { display: none; } @@ -606,6 +589,7 @@ } } + //Tab Layout .productImagesContainer--image-description {