Reputation: 65
I'm trying to build a simple HTML and CSS card, I have a container that contains box-image and body-card, and the design work perfectly on the desktop version but when I arrived at my breakpoint of media query my image it not shrinking with the container, I don't want the image to pass the container when I change the width of the viewport. I'm looking for the best practice :D
HTML
<section class="card">
<div class="card-container">
<div class="box-img">
<img src="./images/drawers.jpg" alt="decor"/>
</div>
<div class="body-card">
<h1> Shift the overall look and feel by adding these wonderful
touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.</p>
<div class="author">
<img src="./images/avatar-michelle.jpg" alt="">
<div class="author-info">
<h4>Michelle Appleton</h4>
<small>20 April 2021</small>
</div>
</div>
</div>
</div>
</section>
CSS
body {
font-family: "Manrope", sans-serif;
margin: auto;
background-color: hsl(210, 46%, 95%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
width: 95vw;
background-color: #fff;
border-radius: 15px;
}
.box-img {
position: relative;
width: 540px;
height: 442px;
}
.box-img img {
height: 100%;
width: 100%;
object-fit: cover;
overflow: hidden;
border-radius: 15px 0px 0px 15px;
}
.body-card {
position: relative;
padding: 2rem 4rem 2rem 3rem;
max-width: 600px;
}
MediaQuery
@media (max-width: 992px) {
.card-container {
flex-direction: column-reverse;
width: 65vw;
}
.box-img {
width: 602px;
height: 308px;
}
}
Upvotes: 1
Views: 206
Reputation: 29521
You're almost there, but you need to make a few small changes:
section
really ought to have an explicit display
declarationsection
a display: block
but it makes more sense simply to move display: flex; justify-content: center; align-items: center;
down from body
to section
width
for elements with a flex-parent - but the whole idea is that these flex-children elements should have flexible dimensions, so use flex: [expand tendency] [shrink tendency] [start-width]
insteadWorking Example:
N.B. Use the Full Page link to see the full effect
body {
font-family: "Manrope", sans-serif;
margin: auto;
background-color: hsl(210, 46%, 95%);
min-height: 100vh;
}
section.card {
display: flex;
justify-content: center;
align-items: center;
}
.card-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 15px;
}
.box-img {
position: relative;
display: block;
flex: 0 1 540px;
max-height: 442px;
}
.box-img img {
height: 100%;
width: 100%;
object-fit: cover;
overflow: hidden;
border-radius: 15px 0px 0px 15px;
}
.body-card {
position: relative;
padding: 2rem 4rem 2rem 3rem;
max-width: 600px;
}
@media (max-width: 992px) {
.card-container {
flex-direction: column-reverse;
width: 65vw;
}
.box-img {
flex: 0 1 602px;
max-height: 308px;
}
}
<section class="card">
<div class="card-container">
<div class="box-img">
<img src="https://picsum.photos/540/442" alt="decor"/>
</div>
<div class="body-card">
<h1> Shift the overall look and feel by adding these wonderful
touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.</p>
<div class="author">
<img src="./images/avatar-michelle.jpg" alt="">
<div class="author-info">
<h4>Michelle Appleton</h4>
<small>20 April 2021</small>
</div>
</div>
</div>
</div>
</section>
Further Reading:
Upvotes: 0
Reputation: 239
If you want the image to have the same size as the card then use width:100%;
. This will change the width of the image to the width of the container.
What you have to change is written below ->
@media (max-width: 992px) {
.card-container {
flex-direction: column-reverse;
width: 65vw;
}
.box-img {
width: 602px; <--- Remove
width:100%; <---- Add
height: 308px;
}
}
Upvotes: 1
Reputation: 4474
Just set your width to 100%?
body {
font-family: "Manrope", sans-serif;
margin: auto;
background-color: hsl(210, 46%, 95%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
width: 95vw;
background-color: #fff;
border-radius: 15px;
}
.box-img {
position: relative;
width: 540px;
height: 442px;
}
.box-img img {
height: 100%;
width: 100%;
object-fit: cover;
overflow: hidden;
border-radius: 15px 0px 0px 15px;
}
.body-card {
position: relative;
padding: 2rem 4rem 2rem 3rem;
max-width: 600px;
}
@media (max-width: 992px) {
.card-container {
flex-direction: column-reverse;
width: 65vw;
}
.box-img {
width: 100%;
}
}
<section class="card">
<div class="card-container">
<div class="box-img">
<img src="https://images.unsplash.com/photo-1531171596281-8b5d26917d8b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="decor"/>
</div>
<div class="body-card">
<h1> Shift the overall look and feel by adding these wonderful
touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.</p>
<div class="author">
<img src="./images/avatar-michelle.jpg" alt="">
<div class="author-info">
<h4>Michelle Appleton</h4>
<small>20 April 2021</small>
</div>
</div>
</div>
</div>
</section>
Upvotes: 2