Hey, I'm currently working on a card layout and have hit a roadblock.
I'd like the images to shrink as the window size decreases proportionally.
Goal: Images should decrease in size until 600px width while staying centered up to that point.
I've added a media query to only display one image below 600px, but am struggling to make the images shrink relative to the window size reduction.
The image container should resize accordingly, but I seem to be stuck.
Any advice or guidance would be greatly appreciated?
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
@media screen and (max-width: 600px) {
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
position: relative;
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
}