Im styling card component. It contains img element and when I'm giving it(to the card component) a width of 100%, it of course it fills the parent containers width, but when I'm giving it max-width: 100%; the card grows only certain size (not the actual used picture width).
/*
=========
Fonts
=========
*/
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Roboto&display=swap");
/* font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif; */
#import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&family=Montserrat:wght#500;700&display=swap");
/* font-family: 'Fraunces', serif;
font-family: 'Montserrat', sans-serif; */
/*
=========
Variables
=========
*/
:root {
--clr-primary-cyan: hsl(158, 36%, 37%);
--clr-primary-cream: hsl(30, 38%, 92%);
--clr-dark-blue: hsl(212, 21%, 14%);
--clr-dark-blue2: hsl(228, 12%, 48%);
--clr-white: hsl(0, 0%, 100%);
--spacing: 0.25rem;
}
/*
=========
Global Styles
=========
*/
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
color: var(--clr-dark-blue);
font-size: 0.875rem;
}
p {
color: var(--clr-dark-blue2);
}
img {
display: block;
width: 100%;
}
/* page styles */
.main {
background: var(--clr-primary-cream);
min-height: 100vh;
display: grid;
place-items: center;
}
/* card style */
.card {
background: var(--clr-white);
/* width: 23rem; */
max-width:100%;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.card-picture {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
object-fit: cover;
}
.card-img-caption {
letter-spacing: var(--spacing);
color: var(--clr-dark-blue2);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.card-info {
padding: 1.25rem;
}
.card-header {
font-family: "Fraunces", serif;
font-size: 2.25rem;
margin-bottom: 1rem;
}
.card-text {
margin-bottom: 1.5rem;
}
.prices {
margin: 1rem 0 1.5rem;
display: flex;
align-items: center;
}
.prices .price {
font-size: 2rem;
font-family: "Fraunces", serif;
color: var(--clr-primary-cyan);
margin-right: 1rem;
}
.prices .price-strike-through {
text-decoration: line-through;
color: var(--clr-dark-blue2);
}
.btn {
width: 100%;
border: none;
border-radius: 0.25rem;
background: var(--clr-primary-cyan);
color: white;
font-size: 1rem;
padding: 0.75rem 2rem;
margin-bottom: 0.5rem;
}
<!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="stylesheet" href="styles.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" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<main class="main">
<article class="card">
<figure class="card-img">
<img src="https://icon-library.com/images/50-x-50-icon/50-x-50-icon-28.jpg" alt="picture preview" class="card-picture">
</figure>
<div class="card-info">
<div class="card-img-caption">
perfume
</div>
<h1 class="card-header">Gabrielle Essence Eau De Parfum</h1>
<p class="card-text">
A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.
</p>
<div class="prices">
<span class="price">$149.99</span>
<span class="price-strike-through">$169.99</span>
</div>
<button class="add-to-cart-button btn">
<i class="fa-solid fa-cart-shopping"></i>
Add to Cart
</button>
</div>
</article>
</main>
</body>
</html>
I saw this behavior first time, nor can I find about it anywhere in internet.
Is this intended behavior with max-width or its side effect?
width: 100%; will force the element to fill the parent's element's total width.
max-width: 100%; will allow the element to fill up to the parent's element's total width.
Meaning, if your picture is 250px:
width: 100%: the picture will fill the container's width, no matter the original size of the image or the container's size (the image will be enlarged or shrunk to fit the container's width)
max-width: 100%: the picture will only be 250px wide maximum; if your container is wider than 250px, the image will not grow larger because although it is allowed to take all the container's width, it doesn't need to.
In your question: "not the actual used picture width", I disagree.
Right-click the following link (the picture in your example) and choose "Open in a new tab", you will see that the picture is 250x250 : https://icon-library.com/images/50-x-50-icon/50-x-50-icon-28.jpg
Related
I'm looking for a way to keep my footer at the bottom of my page when changing resolution. As you can see it's position is currently fixed but even when changing it to relative it's behaving strangely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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=Outfit:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | QR code component</title>
</head>
<body>
<main>
<article class="card">
<div class="card__img">
<img src="https://i.imgur.com/bzXEqJP.png" alt="QR Code redirecting to the Frontend Mentor website" />
</div>
<div class="card__content">
<h1 class="card__title">Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</article>
</main>
<footer>
<div class="attribution">
Coded by Willson.
</div>
</footer>
</body>
</html>
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
/* html,
body {
height: 100%;
} */
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
:root {
--clr-white: hsl(0, 0%, 100%);
--clr-light-gray: hsl(212, 45%, 89%);
--clr-grayish-blue: hsl(220, 15%, 55%);
--clr-dark-blue: hsl(218, 44%, 22%);
--ff-regular: "Outfit", sans-serif;
--fs-regular: 0.938rem;
--fw-regular: 400;
--fw-bold: 700;
}
/* general styling */
body {
font-family: var(--ff-regular);
font-weight: var(--fw-regular);
font-size: var(--fs-regular);
color: var(--clr-grayish-blue);
background-color: var(--clr-light-gray);
/* specific */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* card styles */
.card {
--content-padding: 1.25rem;
--content-spacing: 1rem;
background-color: var(--clr-white);
border-radius: 1.25rem;
overflow: hidden;
padding: 1rem;
margin: 1.5rem;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
#media (min-width: 600px) {
.card {
width: 330px;
}
}
.card__content {
text-align: center;
display: grid;
padding: var(--content-padding);
gap: var(--content-spacing);
}
.card__content > h1,
p {
line-height: 1.25;
}
.card__title {
font-weight: var(--fw-bold);
color: var(--clr-dark-blue);
}
.card__img > img {
border-radius: 0.75rem;
height: auto;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
I tried changing the position from fixed to absolute but it didn't work as expected.
Thank you & have a nice day.
You can use the above
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
try this :
body {
position: relative;
}
footer {
position: absolute;
/*
Then where you want to put it, for example: bottom: 0;
And of course complete what you want after that...
*/
}
I'm having the following issues : when switching on a resolution between 600px - 1024px, my image is acting weird and is not "stretching" (using full space available) as it's supposed to & my footer is not staying at the bottom of the page when changing resolution.
I tried multiple ways to fix it; modifying the min-width of my .card container, playing around with the media query values but unfortunately I didn't manage to find a solution. Same for the footer, changing the footer's position property and adding a media query to it didn't solve it either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
<main>
<article class="card">
<div class="card__content">
<h1 class="card__content--title">
Get
<span class="pretty">insights</span>
that help your business grow.
</h1>
<p class="card__content--text">
Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
</p>
<div class="card__content--stats">
<div class="flex-group">
<div class="companies">
<p class="stats-numbers">10k+</p>
<p class="stats-text">companies</p>
</div>
<div class="templates">
<p class="stats-numbers">314</p>
<p class="stats-text">templates</p>
</div>
<div class="queries">
<p class="stats-numbers">12M+</p>
<p class="stats-text">queries</p>
</div>
</div>
</div>
</div>
<div class="card__img">
<picture class="card__img--image">
<source srcset="https://i.imgur.com/wlktPe0.jpg" media="(min-width: 600px)" />
<img src="https://imgur.com/HCLtExf" alt="" />
</picture>
</div>
</article>
</main>
<footer>
<div class="attribution">
Coded by
Wilson.
</div>
</footer>
</body>
</html>
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
/* html, body {
height: 100%;
} */
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
:root {
--clr-primary-main-background: hsl(233, 47%, 7%);
--clr-primary-card-background: hsl(244, 38%, 16%);
--clr-primary-accent: hsl(277, 64%, 61%);
--clr-neutral-main-heading: hsl(0, 0%, 100%);
--clr-neutral-main-paragraph: hsla(0, 0%, 100%, 0.75);
--clr-neutral-stats-headings: hsla(0, 0%, 100%, 0.6);
--fs-regular: 0.938rem;
--ff-regular: "Inter", sans-serif;
--ff-special: "Lexend Deca", sans-serif;
--fw-regular: 400;
--fw-bold: 700;
}
/* general styling */
body {
font-family: var(--ff-regular);
font-weight: var(--fw-regular);
color: var(--clr-neutral-main-paragraph);
font-size: var(--fs-regular);
background-color: var(--clr-primary-main-background);
/* specific */
display: grid;
place-content: center;
min-height: 100vh;
}
/* utilities */
.flex-group {
display: flex;
flex-direction: column;
gap: 1.4rem;
flex-wrap: wrap;
}
/* card styles */
.card {
display: grid;
border-radius: 0.5rem;
overflow: hidden;
background-color: var(--clr-primary-card-background);
text-align: center;
max-width: 1024px;
margin: 5rem 1.5rem;
}
.card__content {
display: grid;
gap: 1.5rem;
padding: 2rem;
grid-row: 2;
}
.card__content--title {
font-size: 1.7rem;
font-weight: var(--fw-bold);
color: var(--clr-neutral-main-heading);
line-height: 2rem;
}
.pretty {
color: var(--clr-primary-accent);
}
.card__content--text {
margin-top: -0.5rem;
line-height: 1.5rem;
}
.card__content--stats {
margin-top: 1rem;
}
.stats-numbers {
color: var(--clr-neutral-main-heading);
font-weight: var(--fw-bold);
font-size: 1.25rem;
margin-bottom: 0.2rem;
}
.stats-text {
font-family: var(--ff-special);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05rem;
}
.card__img {
position: relative;
}
.card__img::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(83, 0, 138, 0.5);
}
#media (min-width: 1024px) {
.card {
grid-template-columns: 1fr 1fr;
}
.card__content {
text-align: left;
grid-row: 1;
margin: 2rem;
padding-right: 3.5rem;
padding: -1rem;
}
.card__content--title {
font-size: 2rem;
line-height: 2.5rem;
}
.card__content--text {
line-height: 1.5rem;
}
.flex-group {
flex-direction: row;
justify-content: space-between;
}
}
/* footer */
footer {
width: 100%;
position: fixed;
bottom: 0;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
This is because you don't set the image width to 100% anywhere. If you use width: 100%, referring to the image in question, you will get the desired result.
For the footer instead the problem is the position: fixed. The latter specifies a fixed position for an element, meaning it will remain in the same place on the screen even if the page is scrolled.
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
/* html, body {
height: 100%;
} */
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
:root {
--clr-primary-main-background: hsl(233, 47%, 7%);
--clr-primary-card-background: hsl(244, 38%, 16%);
--clr-primary-accent: hsl(277, 64%, 61%);
--clr-neutral-main-heading: hsl(0, 0%, 100%);
--clr-neutral-main-paragraph: hsla(0, 0%, 100%, 0.75);
--clr-neutral-stats-headings: hsla(0, 0%, 100%, 0.6);
--fs-regular: 0.938rem;
--ff-regular: "Inter", sans-serif;
--ff-special: "Lexend Deca", sans-serif;
--fw-regular: 400;
--fw-bold: 700;
}
/* general styling */
body {
font-family: var(--ff-regular);
font-weight: var(--fw-regular);
color: var(--clr-neutral-main-paragraph);
font-size: var(--fs-regular);
background-color: var(--clr-primary-main-background);
/* specific */
display: grid;
place-content: center;
min-height: 100vh;
}
/* utilities */
.flex-group {
display: flex;
flex-direction: column;
gap: 1.4rem;
flex-wrap: wrap;
}
/* card styles */
.card {
display: grid;
border-radius: 0.5rem;
overflow: hidden;
background-color: var(--clr-primary-card-background);
text-align: center;
max-width: 1024px;
margin: 5rem 1.5rem;
}
.card__content {
display: grid;
gap: 1.5rem;
padding: 2rem;
grid-row: 2;
}
.card__content--title {
font-size: 1.7rem;
font-weight: var(--fw-bold);
color: var(--clr-neutral-main-heading);
line-height: 2rem;
}
.pretty {
color: var(--clr-primary-accent);
}
.card__content--text {
margin-top: -0.5rem;
line-height: 1.5rem;
}
.card__content--stats {
margin-top: 1rem;
}
.stats-numbers {
color: var(--clr-neutral-main-heading);
font-weight: var(--fw-bold);
font-size: 1.25rem;
margin-bottom: 0.2rem;
}
.stats-text {
font-family: var(--ff-special);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05rem;
}
.card__img {
position: relative;
}
.card__img img {
width: 100%;
}
.card__img::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(83, 0, 138, 0.5);
}
#media (min-width: 1024px) {
.card {
grid-template-columns: 1fr 1fr;
}
.card__content {
text-align: left;
grid-row: 1;
margin: 2rem;
padding-right: 3.5rem;
padding: -1rem;
}
.card__content--title {
font-size: 2rem;
line-height: 2.5rem;
}
.card__content--text {
line-height: 1.5rem;
}
.flex-group {
flex-direction: row;
justify-content: space-between;
}
}
/* footer */
footer {
width: 100%;
position: relative;
bottom: 0;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
<main>
<article class="card">
<div class="card__content">
<h1 class="card__content--title">
Get
<span class="pretty">insights</span>
that help your business grow.
</h1>
<p class="card__content--text">
Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
</p>
<div class="card__content--stats">
<div class="flex-group">
<div class="companies">
<p class="stats-numbers">10k+</p>
<p class="stats-text">companies</p>
</div>
<div class="templates">
<p class="stats-numbers">314</p>
<p class="stats-text">templates</p>
</div>
<div class="queries">
<p class="stats-numbers">12M+</p>
<p class="stats-text">queries</p>
</div>
</div>
</div>
</div>
<div class="card__img">
<picture class="card__img--image">
<source srcset="https://i.imgur.com/wlktPe0.jpg" media="(min-width: 600px)" />
<img src="https://imgur.com/HCLtExf" alt="" />
</picture>
</div>
</article>
</main>
<footer>
<div class="attribution">
Coded by
Wilson.
</div>
</footer>
</body>
</html>
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
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>