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>
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...
*/
}
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'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
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#import "variables";
#import "utilities";
body {
color: $neutral;
font-family: "Open Sans", sans-serif;
background-color: $main-bg;
}
a {
color: $cyan;
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
p {
font-family: "Raleway", sans-serif;
}
#header {
grid-area: heading;
height: 100vh;
background-color: $intro-email;
position: relative;
background-image: $bg-image;
background-size: contain;
background-repeat: no-repeat;
background-position: left bottom;
// &::before {
// content: "";
// background-image: $bg-image;
// position: absolute;
// width: 100%;
// background-size: contain;
// background-repeat: no-repeat;
// background-position: left bottom;
// }
.navbar {
grid-area: heading;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rem;
.nav-list {
display: flex;
li {
padding: 1rem 1.2rem;
text-transform: uppercase;
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
font-size: 0.8rem;
font-weight: 400;
font-family: "Raleway", sans-serif;
&:hover {
border-color: #fff;
}
&.current {
border-color: #fff;
}
}
}
}
}
.header-content {
max-width: 100%;
margin: 20px auto;
text-align: center;
width: 600px;
img {
max-width: 90%;
margin-top: -50px;
}
}
}
Variabes for CSS $intro-email: hsl(217, 28%, 15%);
$main-bg: hsl(218, 28%, 13%);
$footer-bg: hsl(216, 53%, 9%);
$testimonial-bg: hsl(219, 30%, 18%);
$neutral: hsl(0, 0%, 100%);
$cyan: hsl(176, 68%, 64%);
$blue: hsl(198, 60%, 50%);
$website-width: 1440px;
$bg-image: url("../img/bg-curvy-desktop.svg");
Container .container {
width: $website-width;
max-width: 100%;
padding: 2rem;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;700&display=swap" rel="stylesheet" />
<header id="header">
<div class="container">
<div class="wrapper">
<nav class="navbar">
<img src="../dist/img/logo.svg" alt="" />
<ul class="nav-list">
<li>Features</li>
<li>Team</li>
<li>SignIn</li>
</ul>
</nav>
<div class="header-content">
<img src="../dist/img/illustration-intro.png" alt="" />
<h1 class="title">
All your files in one secue location, accessible anywhere
</h1>
<p class="text">
Flyo stores all your most important files in one secure location. Access them whenever you need, share and collaborate with friends, family and co-workers
</p>
<button class="btn-main">Get Started</button>
</div>
</div>
</div>[Image showing what is happening in my code][1]
</header>
Website width is set to 1440px but anytime i move to the mobile version on my screen, width of the website is never the same and some elements of the website begin to fall out of place of the website, is there a way to fix this or should i remove the container that i am nesting the elements in because that is the website width the design was made for
For your container, consider using a responsive width like width: 100vw (i.e. 100% of viewport/window width). Or, if you really want to stick with 1440px, you can use media queries.
Media queries help applying different CSS rules to different device screen sizes, as a dummy example:
#media(max-width: 599px) {
.container {
/* Your styling for mobile phones */
}
}
#media(min-width: 600px) {
/* Your styling for desktops */
}