I have encountered an issue with resizing images on my browser using a card-based layout that I found on codepen. The strange thing is, the image resizing works perfectly fine on codepen itself, but when I try to implement the same HTML and stylesheet on my browser, the changes do not reflect on the image within the "{ img" section like they did on codepen. While I was able to adjust the margins of the card wrap to achieve the desired appearance, I am still puzzled about what could be causing this problem. Any insights would be greatly appreciated. Thank you!
<!--DOCTYPE html-->
<html lang="en">
<head>
<html>
<link href="home.css" type="text/css" rel="stylesheet" />
<title>Purple Moss</title>
<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
<div class="card">
<div class="card-pic-wrap">
<img src="https://imagizer.imageshack.com/v2/320x240q90/922/MeU4GZ.png" alt="A leafy plant">
</div>
<div class="card-content">
<h3>summary:</h3>
<p>Blossom dorset heath scabious ipsum. Grape hyacinth bee balm bird of paradise obedient plant african lily lily. Spring foxglove florist’s nighmare primrose.</p>
<p><a href="#0">So leafy</a></p>
</div>
</div>
<div class="card">
<div class="card-pic-wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-4.png" alt="Some pointy plants">
</div>
<div class="card-content">
<h3>Some pointy ones</h3>
<p>Florem ipsum sugarbush bloom red rose waxflower coneflower ginger. Saxifrage forget-me-not obedient plant.</p>
<p><a href="#0">I'll take 10</a></p>
</div>
</div>
</div>
</html>
/* CSS */
$b-r: 5px;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Courier New", Courier, monospace;
}
.wrap {
height: 100%;
}
.card {
display: flex;
flex: 0 0 auto;
background: #fff;
max-width: 700px;
margin: 80px 0;
border-radius: $b-r;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
border-radius: $b-r 0 0 $b-r;
width: 200px;
flex: 0 0 auto;
position: relative;
background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
img {
position: relative;
bottom: 3em;
left: 50%;
margin-left: -175px;
width: 350px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}
}
.card-content {
padding: 3em 4em 2em;
}
h3 {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 2.5em;
margin: 0 0 1em;
}
a {
background: #f5e4b5;
color: #15077d;
padding: 0 25px;
height: 50px;
font-size: 0.8em;
letter-spacing: 1px;
line-height: 50px;
display: inline-block;
border-radius: 25px;
text-decoration: none;
margin-top: 1.5em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,0.1);
&:hover {
background: #15077d;
color: #f5e4b5;
border: 2px dotted #f5e4b5;
}
}
@media (max-width: 790px) {
body {
overflow-x: hidden;
}
.wrap {
margin-left: 20px;
margin-right: 20px;
}
.card {
flex-direction: column;
margin-top: 50px;
margin-bottom: 50px;
}
.card-pic-wrap {
width: 100%;
border-radius: $b-r $b-r 0 0;
img {
bottom: 20px;
position: relative;
}
}
.card-content {
padding: 2em 2em 1em;
}
}