I´m working on a challenge for FrontEndMentor and having trouble with the responsive design. The idea is to have an image and it´s information side-by-side and centered on the page. I do this in full screen, but in mobile screen the image moves slightly off-screen, the screen has a cursor and the sizes don´t change at all. I´m doing something wrong, but I don´t know what that is. I´m posting the code below. Where am I screwing up?
Thanks for anything.
:root {
--primary-color-one: hsl(158, 36%, 37%);
--primary-color-two: hsl(30, 38%, 92%);
--neutral-color-one: hsl(212, 21%, 14%);
--neutral-color-two: hsl(228, 12%, 48%);
--neutral-color-three: hsl(0, 0%, 100%);
--fs-700: 2.0rem;
--fs-600: 1.0rem;
--fs-500: 0.8rem;
--fs-400: 0.6rem;
--fs-300: 0.5rem;
--fs-200: 0.4rem;
--fw-lg: 1440px;
--fw-sm: 375px;
--tw-lg: 300px;
--th-lg: 500px;
--tw-sm: 150px;
--th-sm: 250px;
--dw-lg: 75%;
--dw-sm: 15%;
--imgwid-lg: 300px;
--imght-lg: 500px;
--imgwid-sm: 150px;
--imght-sm: 250px;
--btnw-lg: 250px;
--btnp-lg: 20px;
--btnw-sm: 50px;
--btnp-sm: 5px;
}
body {
background-color: var(--primary-color-two);
font-size: 14px;
width: var(--fw-lg);
}
.box {
display: flex;
flex-direction: row;
position: relative;
border: solid 1px transparent;
height: 45vw;
align-items: center;
justify-content: center;
}
/* Image */
img {
display: block;
max-width: var(--imgwid-lg);
max-height: var(--imght-lg);
}
/* Text */
.information {
max-width: var(--tw-lg);
max-height: var(--th-lg);
padding: 20px 20px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-600)
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: var(--fs-500);
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: 75%;
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-300);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-lg);
padding: var(--btnp-lg);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
@media(max-width:375px){
body {
background-color: var(--primary-color-two);
font-size: 14px;
max-width: var(--fw-sm);
}
.box {
display: flex;
flex-direction: row;
position: relative;
border: solid 1px transparent;
height: 22.5vw;
align-items: center;
justify-content: center;
}
/* Image */
img {
display: block;
max-width: var(--imgwid-sm);
max-height: var(--imght-sm);
}
/* Text */
.information {
max-width: var(--tw-sm);
max-height: var(--th-sm);
padding: 20px 20px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-400);
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: 0.8rem;
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: var(--dw-sm);
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-200);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-sm);
padding: var(--btnp-sm);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
}
Probably helpful if you gave us the HTML as well.
Sorry. Here´s the HTML and CSS
CSS
:root {
--primary-color-one: hsl(158, 36%, 37%);
--primary-color-two: hsl(30, 38%, 92%);
--neutral-color-one: hsl(212, 21%, 14%);
--neutral-color-two: hsl(228, 12%, 48%);
--neutral-color-three: hsl(0, 0%, 100%);
--fs-700: 2.0rem;
--fs-600: 1.0rem;
--fs-500: 0.8rem;
--fs-400: 0.6rem;
--fs-300: 0.5rem;
--fs-200: 0.4rem;
--fw-lg: 1440px;
--fw-sm: 375px;
--tw-lg: 300px;
--th-lg: 500px;
--tw-sm: 150px;
--th-sm: 250px;
--dw-lg: 75%;
--dw-sm: 15%;
--imgwid-lg: 300px;
--imght-lg: 500px;
--imgwid-sm: 150px;
--imght-sm: 250px;
--btnw-lg: 250px;
--btnp-lg: 20px;
--btnw-sm: 50px;
--btnp-sm: 5px;
}
body {
background-color: var(--primary-color-two);
font-size: 14px;
width: var(--fw-lg);
}
.box {
display: flex;
flex-direction: row;
position: relative;
border: solid 1px transparent;
height: 45vw;
align-items: center;
justify-content: center;
}
/* Image */
img {
display: block;
max-width: var(--imgwid-lg);
max-height: var(--imght-lg);
}
/* Text */
.information {
max-width: var(--tw-lg);
max-height: var(--th-lg);
padding: 20px 20px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-600)
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: var(--fs-500);
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: 75%;
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-300);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-lg);
padding: var(--btnp-lg);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
@media(max-width:375px){
body {
background-color: var(--primary-color-two);
font-size: 14px;
max-width: var(--fw-sm);
}
.box {
display: flex;
flex-direction: row;
position: relative;
border: solid 1px transparent;
height: 22.5vw;
align-items: center;
justify-content: center;
}
/* Image */
img {
display: block;
max-width: var(--imgwid-sm);
max-height: var(--imght-sm);
}
/* Text */
.information {
max-width: var(--tw-sm);
max-height: var(--th-sm);
padding: 20px 20px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-400);
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: 0.8rem;
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: var(--dw-sm);
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-200);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-sm);
padding: var(--btnp-sm);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
}
HTML
<!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="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 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">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<div class="box">
<!--Image-->
<div class="image"><img src="\images\image-product-desktop.jpg" alt="perfume"></div>
<!--Text-->
<div class="information">
<div class="soft-title">PERFUME</div>
<div class="bold-title">Gabrielle Essence Eau De Parfum</div>
<div class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</div>
<div class="price">
<div class="price-lg">$149.99</div>
<div class="price-sm">$169.99</div>
</div>
<button><i class="fa-thin fa-cart-shopping"></i>Add to Cart</button>
</div>
</div>
</body>
</html>
lasjorg
November 19, 2022, 8:22pm
4
Do not set a width on the body.
Do not set height: 45vw; on .box the content will just overflow. Even if the current content didn’t overflow it makes the design inflexible to receive different content. The layout should be able to deal with different amounts of content. When at all possible the layout should be content agnostic.
No matter what, your layout should stack at some point. At very small screen sizes you might even remove the image.
I have not given body or .box a height as suggested by @lasjorg and this worked on reigning in the content on smaller screen sizes. However, I´m in another predicament. I want the image and text to switch from a row format to stack on top of one another in a column. I’ve set the flex direction to column and I thought that this would be enough but my image and text content remain beside each other.
An additional problem, the image is shrinking in size while the text content remains the same. Should I put the img inside an .image div?
The code is below.
HTML
<!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="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 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">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<div class="box">
<!--Image-->
<div class="image"><img src="\images\image-product-desktop.jpg" alt="perfume"></div>
<!--Text-->
<div class="information">
<div class="soft-title">PERFUME</div>
<div class="bold-title">Gabrielle Essence Eau De Parfum</div>
<div class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</div>
<div class="price">
<div class="price-lg">$149.99</div>
<div class="price-sm">$169.99</div>
</div>
<button><i class="fa-thin fa-cart-shopping"></i>Add to Cart</button>
</div>
</div>
</body>
</html>
CSS
:root {
--primary-color-one: hsl(158, 36%, 37%);
--primary-color-two: hsl(30, 38%, 92%);
--neutral-color-one: hsl(212, 21%, 14%);
--neutral-color-two: hsl(228, 12%, 48%);
--neutral-color-three: hsl(0, 0%, 100%);
--fs-700: 2.0rem;
--fs-600: 1.0rem;
--fs-500: 0.8rem;
--fs-400: 0.6rem;
--fs-300: 0.5rem;
--fs-200: 0.4rem;
--fw-lg: 1440px;
--fw-sm: 375px;
--tw-lg: 300px;
--th-lg: 500px;
--tw-sm: 150px;
--th-sm: 250px;
--dw-lg: 75%;
--dw-sm: 15%;
--imgwid-lg: 300px;
--imght-lg: 500px;
--imgwid-sm: 150px;
--imght-sm: 250px;
--btnw-lg: 250px;
--btnp-lg: 20px;
--btnw-sm: 50px;
--btnp-sm: 5px;
}
body {
background-color: var(--primary-color-two);
font-size: 14px;
}
.box {
display: flex;
flex-direction: row;
position: relative;
border: solid 1px transparent;
align-items: center;
justify-content: center;
}
/* Image */
img {
display: block;
max-width: var(--imgwid-lg);
max-height: var(--imght-lg);
}
/* Text */
.information {
max-width: var(--tw-lg);
max-height: var(--th-lg);
display: block;
padding: 18px 18px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-600)
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: var(--fs-500);
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: 75%;
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-300);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-lg);
padding: var(--btnp-lg);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
@media(max-width:375px){
body {
background-color: var(--primary-color-two);
font-size: 14px;
}
.box {
display: flex;
flex-direction: column;
position: relative;
border: solid 1px transparent;
align-items: center;
justify-content: center;
}
/* Image */
img {
position: relative;
max-width: var(--imgwid-sm);
max-height: var(--imgwid-lg);
}
/* Text */
.information {
position: relative;
max-width: var(--tw-sm);
max-height: var(--th-sm);
padding: 5px 5px;
background-color: var(--neutral-color-three);
}
.soft-title {
padding-bottom: 20px;
color: var(--neutral-color-two);
font-family: Montserrat, sans-serif;
letter-spacing: 0.5em;
font-weight: 500;
font-size: var(--fs-400);
}
.bold-title {
padding-bottom: 20px;
max-width: 75%;
font-family: Fraunces, sans-serif;
font-weight: 700;
font-size: var(--fs-700);
color: var(--neutral-color-one);
}
.description {
font-family: Montserrat, sans-serif;
color: var(--neutral-color-two);
font-weight: 500;
font-size: 0.8rem;
word-spacing: 0.25rem;
line-height: 1.7em;
padding-bottom: 25px;
max-width: var(--dw-sm);
}
.price {
display: flex;
flex-direction: row;
padding-bottom: 30px;
}
.price-lg {
font-family: Fraunces;
font-weight: 700;
font-size: var(--fs-700);
color: var(--primary-color-one);
}
.price-sm {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: var(--fs-200);
text-decoration: line-through;
color: var(--neutral-color-two);
}
button {
width: var(--btnw-sm);
padding: var(--btnp-sm);
background-color: var(--primary-color-one);
color: var(--neutral-color-three);
border: solid 1px var(--primary-color-one);
border-radius: 10px;
}
}
lasjorg
November 21, 2022, 6:08pm
6
I can’t really tell how the design is supposed to work or how small the card is. Not sure how narrow a screen width the desktop design is supposed to cover. I know they give two values but they are not really going to tell you much.
Your layout should be stacking, but it does so very late. You likely have to move the MQ up.
Using flex: 1 on the children is how you usually do it with flexbox. CSS grid might do a better job at even width columns when images are involved.