Hi everyone,
I am working on the Tea Cozy project, and I am struggling with two major parts. For the “Tea of the Month” section, I have been having issues with getting the text to be positioned directly under the images, and to be able to adjust the spacing between the images. Also, I have been having issues with keeping the elements within 1000px. My other issue, is that images in the “Locations” section are not spaced out. I have tried multiple possible flex box properties and combination of those properties, but when I do, the webpage either doesn’t change or essentially undoes the action (especially in the “Tea of the Month” section). I would like to know if I have any code that is overriding any other code that I’ve written or if there is another flex box property combination I need to consider. P.S. the comments are labels for the webpage sections, code I may or may not keep, and other code I would like to consider implementing.
Tea Cozy Project link:
[file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations](file:///Users/simonemcdaniels/Desktop/Codecademy/projects/Tea%20Cozy/index.html#locations)
HTML code:
<!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">
<title>Tea Cozy | Codecademy</title>
<link href="../Tea Cozy/resources/css/styles.css" rel="stylesheet" type="text/css">
<!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/index.html -->
<!-- projects/Tea Cozy/index.html -->
</head>
<body>
<!-- Navigation Bar -->
<header>
<!-- Tea Cozy Logo -->
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-tea-cozy-logo.png" class="logo">
<nav>
<ul>
<li><a href="#mission" class="sections">Mission</a></li>
<li><a href="#month" class="sections">Featured Tea</a></li>
<li><a href="#locations" class="sections">Locations</a></li>
</ul>
<!-- figure out how to link list items to sections of page -->
</nav>
</header>
<!-- consider coding breadcrumb links as flat buttons -->
<!-- Hover function/command--cursor behavior should change when mouse hovers over underlined words -->
<main>
<!-- Mission section -->
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-mission-background.jpg" class="mission-img">
<!-- insert above image as a background image -->
<h2 id="mission">Our Mission</h2>
<h4 class="description">Handpicked, Artisanally Currated, Free Range, Sustainable, Small Batch, Fair Trade, Organic</h4>
<!-- Tea of the Month section -->
<h2 id="month">Tea of the Month</h2>
<h4 class="steeping"> What's Steeping at The Tea Cozy?</h4>
<div class="teas">
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-berryblitz.jpg" class="fall-berry-img">
<h4 class="fall-berry">Fall Berry Blitz Tea</h4>
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-spiced-rum.jpg" class="spiced-rum-img">
<h4>Spiced Rum Tea</h4>
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-donut.jpg" class="seasonal-donuts-img">
<h4>Seasonal Donuts</h4>
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-myrtle-ave.jpg" class="myrtle-ave-img">
<h4>Myrtle Ave Tea</h4>
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-bedford-bizarre.jpg" class="bedford-bizarre-img">
<h4>Bedford Bizarre Tea</h4>
</div>
<!-- Consider making containers "pop out" when mouse hovers over each container -->
<!-- Locations section -->
<h2 id="locations">Locations</h2>
<img src="/Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/images/img-locations-background.jpg" class="locations-background">
<div class="locations-sect">
<div class="downtown">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="east-bayside">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="oakdale">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="contact-info">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
<h5 class="copyright">copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
<!-- /Users/simonemcdaniels/Desktop/Codecademy/projects/Tea Cozy/resources/css/styles.css -->
<!-- projects/Tea Cozy/resources/css/styles.css -->
CSS code:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.8;
text-align: center;
margin: auto 0;
}
/* Navigation Bar */
header {
position: fixed;
text-decoration: underline;
display: flex;
width: 100%;
border-bottom: 1px solid seashell;
background-color: black;
height: 69px;
}
img.logo {
height: 50px;
padding-left: 10px;
padding-top: 10px;
display: inline-flex;
justify-content: flex-start;
}
nav {
display: flex;
background-color: black;
height: 69px;
border-bottom: 1px solid seashell;
text-decoration: underline;
display: inline-flex;
justify-content: flex-end;
flex-grow: 2;
}
ul {
height: 69px;
padding-right: 10px;
display: flex;
}
li {
text-decoration: underline;
height: 69px;
padding-right: 20px;
display: inline-flex;
}
a {
color: seashell;
text-decoration: underline;
cursor: pointer;
}
a, .sections:hover {
color: #c9c9c9;
text-decoration: none;
cursor: pointer;
}
.sections:visited {
color: #c9c9c9;
}
img.mission-img {
height: 700px;
width: 1200px;
position: static;
}
/* Mission */
#mission {
background-color: black;
position: relative;
bottom: 375px;
margin: 0 auto;
width: 1200px;
height: 50px;
padding-top: 10px;
}
h4.description {
background-color: black;
position: relative;
bottom: 375px;
margin: 0 auto;
width: 1200px;
height: 50px;
padding-top: 10px;
}
/* Tea of the Month */
div.teas {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#month {
width: 1000px;
display: flex;
flex-direction: column;
}
h4.steeping {
width: 1000px;
display: flex;
flex-direction: column;
}
img.fall-berry-img, img.spiced-rum-img, img.seasonal-donuts-img, img.myrtle-ave-img, img.bedford-bizarre-img {
height: 200px;
width: 300px;
display: flex;
}
h4.fall-berry {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
/* Property for putting elements under image? */
/* h4.fall-berry, h4.spiced-rum, h4.seasonal-donuts, h4.myrtle-ave, h4.bedford-bizarre {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
} */
/* h4.spiced-rum {
}
h4.seasonal-donuts {
}
h4.myrtle-ave {
}
h4.bedford-bizarre {
} */
/* Locations */
#locations {
position: relative;
top: 100px;
padding-top: 30px;
}
img.locations-background {
height: 800px;
width: 1200px;
position: static;
}
/* consider adding id properties */
/* consider adding and adjusting property */
/* h3, p {
display: flex;
align-content: space-between;
} */
div.locations-sect {
display: flex;
justify-content: center;
}
div.downtown, div.east-bayside, div.oakdale {
background-color: black;
height: 300px;
width: 300px;
opacity: 1;
position: relative;
bottom: 710px;
display: flex;
flex-direction: column;
}
/* div.downtown, div.east-bayside {
} */
/* div.downtown, div.oakdale {
display: flex;
flex-shrink: 1;
} */
div.downtown {
padding-right: 40px;
display: inline-flex;
}
div.east-bayside {
padding-right: 40px;
display: inline-flex;
}
div.oakdale {
padding-right: 40px;
display: inline-flex;
}
/* Footer */
div.contact-info {
text-align: center;
max-height: 200px;
}
h5.copyright {
text-align: left;
padding-left: 20px;
}
I recommend using flexbox. Not that you cannot use position: relative at all, just that I wouldn’t use it under the same ruleset as you have in your css code.