From cfa170f28f11eb911a6c65cde743223e200f7cd1 Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 11 Oct 2024 17:03:15 +0100 Subject: [PATCH 1/2] Changed semantics + formatting --- product-preview/index.html | 66 ++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/product-preview/index.html b/product-preview/index.html index bccb476..a86d7b1 100644 --- a/product-preview/index.html +++ b/product-preview/index.html @@ -1,39 +1,37 @@ - - - - Product Preview - - - - -
- Image of the product - Image of the product -
-

perfume

-

Gabrielle Essence Eau De Parfum

-

- A floral, solar and voluptuos interpretation composed by Oliver Polge, - Perfume-Creator for the House of CHANEL. -

-
-

$149.99

-

$169.99

-
-
- Cart Icon - Add to cart -
+ + + + Product Preview + + + + + +
+
+ Image of the product + Image of the product +
+
+

perfume

+

Gabrielle Essence Eau De Parfum

+

+ A floral, solar and voluptuos interpretation composed by Oliver Polge, + Perfume-Creator for the House of CHANEL. +

+
+

$149.99

+

$169.99

+
+
+ Cart Icon + Add to cart
-
- +
+
+ + From 6a4f55c22fd37e110b2466eb2f4262ebb24f4838 Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 11 Oct 2024 17:20:22 +0100 Subject: [PATCH 2/2] Added styling for image so that it works inl;ine now --- product-preview/style.css | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/product-preview/style.css b/product-preview/style.css index e8d6226..a4fe3e5 100644 --- a/product-preview/style.css +++ b/product-preview/style.css @@ -50,7 +50,6 @@ a:visited { display: grid; border-radius: 10px; grid-template-areas: "one two"; - grid-auto-columns: min-content; background-color: var(--White); } @@ -103,13 +102,16 @@ h1 { } .product-image { - height: 60vh; - object-fit: contain; - grid-area: one; + max-width: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } +.image-div { + grid-area: one; + border-top-left-radius: 10px; +} + .price-full { margin-left: 30px; color: grey; @@ -117,8 +119,10 @@ h1 { .product-text { grid-area: two; - width: 27vw; padding: 20px; + /* width: 500px; */ + display: flex; + flex-direction: column; } @media screen and (max-width: 900px) { @@ -135,10 +139,12 @@ h1 { width: auto; } - .product-image-mobile { - display: block; + .image-div { grid-area: one; - width: 50vw; + } + + .product-image-mobile { + display: inline; border-top-right-radius: 20px; border-top-left-radius: 20px; }