Hi. I am having a problem sizing my photos correctly. The first part of the website renders correctly, but I seem to be unable to size the 5 photos to a l x w of 200px x 300px. They are of varying sizes, and it’s making the site look weird. Here is the code:
HTML…
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="./tea-cozy.css" type="text/css" rel="stylesheet">
</head>
<body>
<header class="header">
<img class="logo" name="logo"
src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul class="headerList">
<li class="mission">Mission</li>
<li class="featuredTea">Featured Tea</li>
<li class="locations">Locations</li>
</ul>
</header>
<section class="background">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
<div class="missionStatement">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<section class="monthlyTea">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<figure id="berryBlitz">
<img src="./Tea Cozy Berry Blitz.jpg">
<figcaption id="blitzCaption">Fall Berry Blitz Tea</figcaption>
</figure>
<figure id="spicedRum">
<img src="./Tea Cozy Spiced Rum.jpg">
<figcaption id="rumCaption">Spiced Rum Tea</figcaption>
</figure>
<figure id="seasonalDonuts">
<img src="./Tea Cozy Donut.jpg">
<figcaption id="donutCaption">Seasonal Donuts</figcaption>
</figure>
<figure id="myrtleAve">
<img src="./Tea Cozy Myrtle Ave.jpg">
<figcaption id="myrtleAveCaption">Myrtle Ave Tea</figcaption>
</figure>
<figure id="bedfordBizarre">
<img src="./Tea Cozy Bedford Bizzare.jpg">
<figcaption id="bedfordBizarreCaption">Bedford Bizarre Tea</figcaption>
</figure>
</section>
</body>
</html>
and the CSS…
body {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
position: fixed;
background-color: black;
display: flex;
justify-content: space-between;
padding: 0 10px;
align-items: center;
z-index: 2;
}
.logo {
display: inline-flex;
flex-direction: row;
height: 50px;
}
.headerList {
text-decoration: underline;
display: inline-flex;
list-style-type: none;
padding-right: 20px;
}
.mission, .featuredTea, .locations {
display: inline-flex;
flex-direction: row;
padding: 10px;
}
.background {
height: 700px;
width: 1200px;
margin: 0 auto;
position: relative;
top: 70px;
z-index: 1;
}
.missionStatement {
background-color: black;
position: absolute;
top: 300px;
width: 1200px;
padding-top: 2px;
padding-bottom: 2px;
}
.monthlyTea {
display: block;
width: 1000px;
top: 900px;
}
#berryBlitz, #spicedRum, #seasonalDonuts, #myrtleAve, #bedfordBizarre {
display: inline-flex;
flex-flow: row wrap;
height: 200px;
width: 300px;
margin: 10px;
}
Any help would be greatly appreciated. Thank you.