i have a problem with the info div overflowing it parent container but not it content ,some other component are also overflowing but it's not a problem and a margins problem some are just there and the others won't appear at all this is happening in width under 375px
plus if any one has an idea why the font awesome icon appears as a square i couldn't find a solution
update
the overflow problem has been solved but i still have a problem with the extra margin of the html on the right and the lack of for the container
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<div class="container">
<img src="images/image-product-desktop.jpg" alt="">
<div class="info">
<span class="type">Perfume</span>
<h1 class="title">Gabrielle Essence Eau De Parfume</h1>
<p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="prices">
<span class="newprice">$149.99</span>
<span class="oldprice">$169.99</span>
</div>
<button><i class="fa-regular fa-cart-shopping"></i> Add To Cart</button>
</div>
</div>
</body>
</html>
`
`
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: hsl(228, 12%, 48%);
}
html{
margin: 0;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.container{
max-width: 37rem;
max-height: 45rem;
display: flex;
background-color: #fff;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
img{
max-width: 18.5rem;
max-height: 45rem;
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.title{
font-family: 'Fraunces', serif;
color: black;
margin: .8rem auto 1rem;
}
.info{
padding: 1.9rem;
}
p{
font-size: 14px;
line-height: 1.3rem;
}
.prices{
margin: 1.5rem auto 1.3rem;
display: flex;
align-items: center;
}
.newprice{
font-family: 'Fraunces', serif;
font-weight: 700;
color: #658354;
font-size: 2rem;
}
.oldprice{
text-decoration:line-through;
font-size: .7rem;
margin: 1rem;
}
button{
color: #fff;
background-color: #658354;
width: 100%;
padding: 1.5rem 1rem;
font-size: .8rem;
border: none;
padding: .7rem;
border-radius: .5rem;
cursor: pointer;
}
button:active{
background-color: #2f4125;
}
#media(max-width : 375px){
*{
margin: 1rem;
}
img{
width: 100%;
height: 40%;
border-radius: .5rem;
}
.container{
display: block;
}
.info{
margin-bottom: 1rem;
padding: 0;
height: 100%;
}
}
`
you can add in css
#media screen and (min-width: 320px) and (max-width: 375px) {
//your code
}
remove the max-height: 45rem; property from container class
for any one who has the margin problem as i do here i solved it by eliminating the body height and width to auto in the 375 max-width media
Related
So I'm relatively new to Css and trying to learn it by doing some projects , I'm almost through with this one , but the thing that I'm not getting right is that the image is not taking up the same height as that of the left div , why is this so , even though I have set the height of left container to be 100% of the main container
I'm attaching the code for your reference
#import url(https://fonts.google.com/specimen/Fraunces);
#import url(https://fonts.google.com/specimen/Montserrat);
:root {
--Dark-cyan: hsl(158, 36%, 37%);
--Cream: hsl(30, 38%, 92%);
--Very-dark-blue: hsl(212, 21%, 14%);
--Dark-grayish-blue: hsl(228, 12%, 48%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
background-color: var(--Cream);
color: black;
}
.container {
background-color: var(--White);
width: 33%;
height: 33%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 4rem auto;
}
.left-side {
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img {
width: 100%;
object-fit: cover;
}
.right-side {
width: 50%;
height: 100%;
padding: 2rem;
}
h5 {
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.4rem;
color: var(--Dark-grayish-blue);
margin: 0 0 2em 0;
}
h1 {
font-family: "Fraunces", serif;
font-weight: 700;
letter-spacing: 0.07rem;
}
.content {
font-family: "Fraunces", serif;
font-weight: 500;
color: var(--Dark-grayish-blue);
margin: 1.75em 0;
line-height: 1.5;
}
.prices {
font-family: "Fraunces", serif;
display: inline;
margin: 0 0.5em;
}
.old-price {
text-decoration: line-through;
}
.new-price {
font-weight: 700;
color: var(--Dark-cyan);
}
.btn {
padding: 0.5em 1.8em;
background-color: var(--Dark-cyan);
color: var(--White);
width: 95%;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 1.75em 0 0 0;
}
.btn:hover {
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<section class="main-body">
<div class="container">
<div class="left-side">
<img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
</div>
<div class="right-side">
<h5>PERFUME</h5>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p class="content">A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
<div class="price">
<h1 class="new-price prices">$149.99</h1>
<p class="old-price prices">$169.99</p>
</div>
<button class="btn">
<i class="fa fa-shopping-cart" style="font-size:16px"></i> Add To Cart
</button>
</div>
</section>
</body>
</html>
.left-side{
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img{
width:100%;
object-fit: cover;
Only thing i can think of is that you have given it two different properties, try combining these in the same css stack
.container {
/* ... */
align-items: stretch; /* Add this line */
}
.left-side {
/* ... */
height: 100%; /* <- Remove this line */
/* Add these two lines: */
min-height: 100%;
background-image: url("images/image-product-mobile.jpg");
}
Also, remove the <img /> from the left-side div; now it's on the CSS (.left-side), so you can cover and center the background.
Demo:
https://jsfiddle.net/adqb1v8r/
i am trying to some challenges in frontendmentor.io.trying to replicate a product card.I have almost done.But i am stuck with border radius to the .right element, i applied border top right and bottom right radius as 10 px to .right element.but it is not reflecting in the browser.and another problem is the width of the card.there is slight diffrents between the width of the actual project and mine.actual project width is lesser than mine.i have attached both images here.kindly fix these two problem
original
[![
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
main{width: 100%;}
.card {
min-width: 600px;
width: 30%;
background-color: #fff;
display: flex;
margin: 0 auto;
}
.right{
display: flex;
flex-direction: column;
width: 50%;
row-gap: 24px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 10px 30px;
}
.right .itemcategory{
color: hsl(228, 12%, 48%);
letter-spacing: 4px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
.left{
width: 50%;
background-image: url("/images/image-product-desktop.jpg");
background-position: center;
background-size: cover;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.des{
color: hsl(228, 12%, 48%);
font-size: 14px;
font-weight: 500;
line-height: 1.5rem;
}
h1{
font-size: 30px;
font-weight: 700;
line-height: 30px;
}
.offerprice {
color: hsl(158, 36%, 37%);
font-size: 28px;
}
.beforeprice{
font-size: 14px;
}
button{
background-color: hsl(158, 36%, 37%);
width: 100%;
padding: 14px;
display: flex;
justify-content: center;
margin: 0 auto;
color: #fff;
align-items: center;
font-weight: 700;
border-radius: 7px;
border: none;
}
button img{
margin-right: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<main>
<div class="card">
<div class="left">
<img src="" alt="">
</div>
<div class="right">
<p class="itemcategory">Perfume</p>
<h1>Gabrielle<br> Essence Eau <br>De Parfum</h1>
<p class="des"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price">
<p class="offerprice">$149.99</p>
<p class="beforeprice">$169.99</p>
</div>
<button>
<img src="images/icon-cart.svg" alt="" >
Add to Cart
</button>
</div>
</main>
</body>
</html>
]2]2
The first problem can easily be fixed by adding a "border-radius" to the .card class. The second problem can be fixed by changing the height of the .card class and adding "padding-top" to the .right class. I haven't changed the hight in my example (code below) since I don't have access to the image.
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
main{width: 100%;}
.card {
min-width: 600px;
width: 30%;
background-color: #fff;
display: flex;
margin: 0 auto;
border-radius: 10px;
}
.right{
display: flex;
flex-direction: column;
width: 50%;
row-gap: 24px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 20px 30px;
}
.right .itemcategory{
color: hsl(228, 12%, 48%);
letter-spacing: 4px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
.left{
width: 50%;
background-image: url("/images/image-product-desktop.jpg");
background-position: center;
background-size: cover;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.des{
color: hsl(228, 12%, 48%);
font-size: 14px;
font-weight: 500;
line-height: 1.5rem;
}
h1{
font-size: 30px;
font-weight: 700;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<main>
<div class="card">
<div class="left">
<img src="" alt="">
</div>
<div class="right">
<p class="itemcategory">Perfume</p>
<h1>Gabrielle<br> Essence Eau <br>De Parfum</h1>
<p class="des"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price">
<p class="offerprice">$149.99</p>
<p class="beforeprice">$169.99</p>
</div>
<button>
<img src="images/icon-cart.svg" alt="" >
Add to Cart
</button>
</div>
</main>
</body>
</html>
You're missing a closing div tag for the .right element that should come after the button element.
Then just add border-radius: 10px on the .card element, which means you can remove the border-radius styles on .left and .right elements.
If border-radius is still not applied, add overflow: hidden to the .card element.
#import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
main{width: 100%;}
.card {
min-width: 600px;
width: 30%;
background-color: #fff;
display: flex;
margin: 0 auto;
border-radius: 15px;
}
.right{
display: flex;
flex-direction: column;
width: 50%;
row-gap: 24px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 10px 30px;
}
.right .itemcategory{
color: hsl(228, 12%, 48%);
letter-spacing: 4px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
.left{
width: 50%;
background-image: url("/images/image-product-desktop.jpg");
background-position: center;
background-size: cover;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.des{
color: hsl(228, 12%, 48%);
font-size: 14px;
font-weight: 500;
line-height: 1.5rem;
}
h1{
font-size: 30px;
font-weight: 700;
line-height: 30px;
}
.offerprice {
color: hsl(158, 36%, 37%);
font-size: 28px;
}
.beforeprice{
font-size: 14px;
}
button{
background-color: hsl(158, 36%, 37%);
width: 100%;
padding: 14px;
display: flex;
justify-content: center;
margin: 0 auto;
color: #fff;
align-items: center;
font-weight: 700;
border-radius: 7px;
border: none;
}
button img{
margin-right: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<main>
<div class="card">
<div class="left">
<img src="" alt="">
</div>
<div class="right">
<p class="itemcategory">Perfume</p>
<h1>Gabrielle<br> Essence Eau <br>De Parfum</h1>
<p class="des"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price">
<p class="offerprice">$149.99</p>
<p class="beforeprice">$169.99</p>
</div>
<button>
<img src="images/icon-cart.svg" alt="" >
Add to Cart
</button>
</div>
</main>
</body>
</html>
I'm currently stuck at this, its a picture:
I need both product-info and image heights to be the same, but for some reason using height: 100% in CSS desktop version doesn't works. Maybe giving card-component and especific height would work?. Also any suggestions to my code are welcomed, specifly with responsive design's stuff.
I'm new with CSS and I'm doing this for practice.
This is my HTML and CSS code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 530px)">
<title>Product preview card component</title>
</head>
<body>
<main>
<div class="card-component">
<figure class="image-container">
<picture>
<source media="(min-width: 530px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" class="card-component__image" alt="product image">
</picture>
</figure>
<div class="card-component__product-info">
<span>PERFUME</span>
<div class="card-component__product-description">
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuos
interpretation composed by Oliver
Polge, Perfumer-Creator for the House
of CHANEL.
</p>
</div>
<div class="card-component__price">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button class="card-button">
<img src="./images/icon-cart.svg" alt="cart icon">
Add to Cart
</button>
</div>
</div>
</main>
</body>
</html>
CSS: Mobile
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-cyan: hsl(158, 36%, 37%);
--cream: hsl(30, 38%, 92%);
--very-dark-blue: hsl(212, 21%, 14%);
--dark-grayish-blue: hsl(228, 12%, 48%);
--white: hsl(0, 0%, 100%);
}
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
main {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-color: var(--cream);
}
.card-component {
width: 92.5%;
height: auto;
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
}
.card-component .image-container {
width: 100%;
height: auto;
}
.card-component .card-component__image {
max-width: 100%;
max-height: 100%;
display: block;
border-radius: 1rem 1rem 0 0;
}
.card-component__product-info {
font-family: "Montserrat";
color: var(--dark-grayish-blue);
width: 100%;
height: auto;
background-color: var(--white);
padding: 0 2.5rem;
border-radius: 0 0 1rem 1rem;
}
.card-component__product-info span {
display: block;
letter-spacing: 0.5rem;
font-size: 1.2rem;
margin-bottom: 1rem;
margin-top: 2rem;
}
.card-component__product-description {
margin-bottom: 2rem;
}
.card-component__product-description h1 {
font-family: "Fraunces";
font-weight: bold;
font-size: 3.4rem;
line-height: 3.5rem;
color:black;
margin-bottom: 1.5rem;
}
.card-component__product-description p {
line-height: 2.5rem;
}
.card-component__price {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.card-component__price h1 {
font-family: "Fraunces";
font-weight: bold;
font-size: 3.4rem;
color: var(--dark-cyan);
margin-right: 2rem;
}
.card-component__price p {
text-decoration: line-through;
}
.card-button {
width: 100%;
height: 4.5rem;
margin-bottom: 2.5rem;
font-family: "Montserrat";
font-weight: bold;
color: var(--white);
border: none;
background-color: var(--dark-cyan);
border-radius: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.card-button img {
margin-right: 1rem;
}
.card-button:hover {
background-color: var(--very-dark-blue);
}
CSS:Desktop
.card-component {
flex-direction: row;
}
.card-component .card-component__image {
border-radius: 1rem 0 0 1rem;
}
.card-component__product-info{
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
border-radius: 0 1rem 1rem 0;
}
I've been working on this project and I am fully stuck on ensuringing both cards (the image and the project content) are on the same row when displayed on desktop. After a few days, I admit I need help.
Can anyone tell me where I've gone wrong and how I can solve this using flexbox correctly because I am going crosseyed trying to figure it out.
Below is a photo of what it's supposed to look like in desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
#media screen and (max-width : 667px) {
#container {
border-radius: 10px 0 10px 0;
height: 39.7em;
width: 22.8em;
}
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.image {
background-image: url(images/image-product-desktop.jpg);
background-repeat: no-repeat;
background-size: contain;
border-radius: 10px 0 0 10px;
height: 394px;
max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;
}
#media screen and (max-width : 667px) {
.image {
background-image: url(images/image-product-mobile.jpg);
border-radius: 10px 10px 0 0;
height: 230px;
width: 50%;
margin: 0 auto;
}
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
}
#media screen and (max-width : 667px) {
.right-container {
border-bottom-left-radius: 10px;
border-top-right-radius: 0px;
padding: 30px 30px 5px;
width: 50%;
margin: 0 auto;
}
}
.right-container h1 {
margin: auto auto 7% auto;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
padding: 4% 32%;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="row">
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<img src="./images/icon-cart.svg" alt="card-img">
<button class="cart-btn">Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
To solve this I simply put the element with the background-image in a new div called .left-container. I removed the use of two .row's and put them in one row and set it to display: flex;. I then used Font Awesome for your shopping cart icon.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
align-items: center;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
display: flex;
font-family: 'Montserrat', sans-serif;
font-size: 0.875em;
justify-content: center;
height: 100vh;
}
h1 {
color: black;
font-family: 'Fraunces', serif;
font-size: 1.875em;
}
h3 {
font-size: 0.75em;
font-weight: 500;
letter-spacing: 7px;
text-transform: uppercase;
}
p {
font-size: 0.75em;
line-height: 1.7;
}
.row {
display: flex;
}
/* ------ ENTIRE CONTAINER --------- */
#card-container {
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
flex-direction: row;
width: 700px;
margin: 0 auto;
}
#card-container row {
display: flex;
flex-direction: row;
margin: 0;
}
/* ------ LEFT CONTAINER w/ IMAGE --------- */
.left-container {
width: 50%;
height: 450px;
}
.image {
background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
border-radius: 10px 0 0 10px;
margin-right: 0;
display: flex;
flex-direction: row;
}
/* ------RIGHT CONTAINER w/ CONTENT --------- */
.right-container {
background-color: white;
border-radius: 0 10px 10px 0;
height: 450px;
padding: 2em;
width: 50%;
display: flex;
flex-flow: column;
justify-content: space-around;
}
.right-container h3 {
padding-bottom: 1em;
padding-top: 1.9em;
}
.right-container p {
padding-right: 2em;
padding-top: 1.1em;
}
/* ------ PRICES --------- */
.price-container h1 {
color: hsl(158, 36%, 37%);
display: inline-block;
margin-top: 20%;
}
.price-container p {
display: inline-block;
margin-left: 5em;
text-decoration: line-through;
}
/* ------- ADD TO CART --------- */
.cart-btn {
background-color: hsl(158, 36%, 37%);
background-position: 4em;
background-repeat: no-repeat;
border-radius: 10px;
border: transparent;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
width: 100%;
padding: 1em;
}
.cart-btn:hover {
background-color: black;
cursor: pointer;
}
i {
color: white;
}
.card-container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Product preview card component</title>
<!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="card-container">
<div class="row">
<div class="left-container">
<div class="image">
<div class="img-desktop"></div>
<div class="img-mobile"></div>
</div>
</div>
<div class="right-container">
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<div class="cart-container">
<button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
Add to Cart</button>
</div>
</div>
</div>
</section>
</body>
</html>
I have made my self page that replicates the solution you want, I have done minimal styling to make you understand how flexbox properties in CSS work (NOTE: I have not made it responsive so try to have a look on desktop view). Refer to my solution and ask question(s) if you are facing any doubts.
* {
margin: 0;
padding: 0;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
font-family: "Montserrat", sans-serif;
font-size: 0.875em;
}
#random-image {
height: 100%;
width: 100%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.intermediate-container {
display: flex;
width: 60%;
height: 50%;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}
.left-container {
width: 50%;
}
.right-container {
width: 50%;
padding: 10px;
background-color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Your title</title>
</head>
<body>
<section class="card-container">
<div class="intermediate-container">
<div class="left-container">
<img
id="random-image"
src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
/>
</div>
<div class="right-container">
<div>
<h3>Perfume</h3>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price-container">
<h1>$149.99</h1>
</div>
<div class="cart-container">
<button class="cart-btn">
<i class="fa-solid fa-cart-shopping"></i> Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
#card-container row <- use proper selector (.row)
and from given information I can only predict that
I want the header which is position:fixed to not move when I put a margin on the #main section. I have seen to try and add padding to the top element, but that did not help. I even tried giving the #email-section some top-margin, but that did not work either. It's almost like the header and main elements are attached. I am a self-taught and self-learning website developer. I'm sorry if this does not make sense. I will try and help you out with any information you want to know about the code. Thank you.
body {
background: url(marble_background_backup.jpg);
}
header {
position: fixed;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
}
header #header-img {
width: 100px;
margin-left: 20px;
}
header h1 {
font-family: "Abril Fatface";
font-size: 42px;
margin-left: 2%;
width: 60%;
}
#media (max-width: 1550px) {
header h1 {
width: 40%;
}
}
header li {
display: inline;
font-size: 30px;
font-weight: 500;
font-family: "Abril Fatface";
}
header li a {
text-decoration: none;
color: brown;
}
#main {
width: 100%;
margin-top: 100px;
}
#main #email-section {
width: 20%;
margin: 0 auto;
text-align: center;
font-family: "Bebas Neue";
font-size: 30px;
}
#main #email-section h2 {
margin-bottom: 0px;
letter-spacing: 0.05em;
}
#main #email-section input {
width: auto;
margin: auto;
font-size: 20px;
margin-top: 15px;
border: 3px solid brown;
color: brown;
border-radius: 5px;
display: block;
}
#main #email-section input[type=submit] {
background-color: lightyellow;
}
#main #email-section input:hover, #main #email-section input:focus {
background-color: blanchedalmond;
}
#facts {
display: flex;
flex-direction: column;
width: 50%;
margin: 8% auto 0 auto;
font-size: 28px;
}
#facts .facts-boxes {
display: flex;
flex-direction: row;
margin: 3%;
}
#facts .facts-boxes img {
width: 100px;
margin-right: 5%;
}
#facts .facts-boxes #bean-pic {
border-radius: 50%;
}
#facts .liner {
width: 50%;
height: 6px;
background-color: brown;
margin: 0 0 0 auto;
padding: 0;
transform: skewX(-40deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/styler.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>Lion's Club Product Page</title>
</head>
<body>
<header>
<img id='header-img' src="lion1.png">
<h1>Lions Club Coffee House</h1>
<ul>
<li>| Learn</li>
<li> | Pricing</li>
<li> | About |</li>
</ul>
</header>
<main id="main">
<section id="email-section">
<h2>Know where your coffee comes From</h2>
<form action="#">
<input type="email" id="email" placeholder="Enter your email">
<input type="submit" id="submit" value="keep me informed">
</form>
</section>
<section id="facts">
<div class="facts-boxes"><img src="/plant.svg" alt="plant picture"><h3>Ethically sourced from trusted coffee farms</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/coffee_bean.jpg" id="bean-pic"><h3>New Varieties Weekly</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/trophy.svg"><h3>Trained Baristas inhouse</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/medal_first.svg"><h3>Quality Unmatched</h3></div>
<hr class="liner">
</section>
set top:0; to your header
it will probably fixed, if not try adding another element with same height as your header... an empty div can help and it won't be visible because it will be under header only works as you want
The fixed <header> element is getting its default position based on the layout of the page (which includes the margins). If you want to explicitly specify its position, you can just do:
header {
top: 0;
}