Hi All,
I just finished the Tea Cozy project and would like to know if anyone has some advice on anything I can be doing better? I must admit this one had me scratching my head somewhat! The site seems to work perfectly in full screen mode, but when I change to phone screen size using Chrome Dev Tools some aspects seem to align to the left instead of centrally. I cant work out why! Any help massively appreciated!
HTML
<!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</title>
<link rel="stylesheet" href="Resources/styles.css">
</head>
<!--Top Bar of the Website-->
<header>
<!--Tea Cozy Logo Component-->
<div class="Banner">
<div class="Logo Container"><img src="Resources/Images/Logo.png" alt="Tea Cozy Logo"></div>
<div class="Nav Container">
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Featured Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</nav>
</div>
</div>
</header>
<body>
<!--Mission Section-->
<section>
<div class="Mission">
<div class="Container">
<h2>Our Mission</h2>
<h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</section>
<!--Tea of the month Section-->
<section>
<div class="TOTMHead">
<h2>Tea of the Month</h2>
<h4>What's sleeping at the Tea Cozy?</h4>
</div>
<div class="TOTM">
<div class="Container Berryblitz">
<img src="Resources/Images/Berryblitz.jpeg" alt="Berryblitz">
<h4>Berryblitz</h4>
</div>
<div class="Container Spiced-Rum">
<img src="Resources/Images/Spiced-Rum.jpeg" alt="Spiced-Rum">
<h4>Spiced-Rum</h4>
</div>
<div class="Container Donut">
<img src="Resources/Images/Donut.jpeg" alt="Donut">
<h4>Donut</h4>
</div>
<div class="Container Myrtle-Ave">
<img src="Resources/Images/Myrtle-Ave.jpeg" alt="Myrtle-Ave">
<h4>Myrtle-Ave</h4>
</div>
<div class="Container Bedford-Bizzare">
<img src="Resources/Images/img-bedford-bizarre.jpg" alt="Bedford-Bizzare">
<h4>Bedford-Bizzare</h4>
</div>
</div>
</section>
<!--Locations Section-->
<section>
<!--Parent FlexBox Element-->
<div class="Locations">
<!--Child Element-->
<div class="Container TextBox">
<h3 class="firstloc">Downtown</h3>
<h3 class="secondloc">384 West 4th Street</h3>
<h3 class="thirdloc">Suite 108</h3>
<h3 class="fourthloc">Portland, Maine</h3>
</div>
<!--Child Element-->
<div class="Container TextBox">
<h3 class="firstloc">East Bayside</h3>
<h3 class="secondloc">3433 Phishermans Avenue</h3>
<h3 class="thirdloc">Northwest Corner</h3>
<h3 class="fourthloc">Portland, Maine</h3>
</div>
<!--Child Element-->
<div class="Container TextBox">
<h3 class="firstloc">Oakdale</h3>
<h3 class="secondloc">515 Crescent Avenue</h3>
<h3 class="thirdloc">Second Floor</h3>
<h3 class="fourthloc">Portland, Maine</h3>
</div>
</div>
</section>
<!--Final Section-->
<section>
<div class="About">
<div class="Container">
<h2>The Tea Cozy</h2>
<h3>[email protected]</h3>
<h3>917-555-8904</h3>
</div>
</div>
</section>
</body>
<footer>
<h3 class="copyright">copyright The Tea Cozy 2017</h3>
</footer>
</html>
CSS:
/*Globally applicable Rules*/
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
background-color: black;
font-family: Helvetica, sans-serif;
color: seashell;
}
h2{
font-size: 40px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 20px;
}
h4{
font-size: 22px;
margin-bottom: 10px;
margin-top: 10px;
}
.Container{
display: flex;
align-items: center;
}
/*The Header Component of the Website*/
.Banner{
position: fixed;
display: flex;
height: 69px;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: black;
}
header .Container{
height: 50px;
width: auto;
}
header img{
height: 50px;
}
.Logo{
margin-left: 10px;
}
nav ul{
list-style: none;
}
nav li{
display: inline;
padding: 10px;
}
/*The Mission section of the Website*/
.Mission{
height: 700px;
width: 1200px;
display: flex;
background-image: url(../Resources/Images/background.jpeg);
background-repeat: no-repeat;
margin: auto;
align-items: center;
flex: 1 1 auto;
}
.Mission .Container{
width: 100%;
flex-direction: column;
}
/*Tea of the Month section of the Website*/
.TOTMHead{
display: flex;
height: auto;
align-items: center;
flex-direction: column;
margin-top: 10px;
width: auto;
}
.TOTM{
margin-top: 40px;
width: 1200px;
height: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: auto;
flex: 1 1 auto;
}
.TOTM .Container{
height: 240px;
width: 300px;
display: flex;
margin: 10px;
flex-direction: column;
}
.Berryblitz img, .Spiced-Rum img, .Donut img, .Myrtle-Ave img, .Bedford-Bizzare img{
height: 200px;
}
/*Locations section of the Website*/
.Locations{
height: 500px;
width: 1200px;
display: flex;
background-image: url(../Resources/Images/Locations.jpeg);
background-repeat: no-repeat;
margin: auto;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
.Locations .TextBox{
height: auto;
width: 300px;
display: flex;
margin: 20px;
flex-direction: column;
}
h3.firstloc{
font-weight: bold;
margin-top: 30px;
}
h3.secondloc, h3.thirdloc, h3.fourthloc{
font-size: 15px;
font-weight: 300;
margin-top: 40px;
margin-bottom: 30px;
}
/*About section of the Website*/
.About{
height: 200px;
width: auto;
display: flex;
margin: auto;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
.About .Container{
height: 200px;
width: auto;
display: flex;
flex-direction: column;
}
.About h2{
font-weight: 400;
font-size: 16;
margin-top: 15px;
margin-bottom: 0px;
}
.About h3{
font-weight: 400;
font-size: 14;
margin-top: 30px;
}
/*Footer Styling*/
.copyright{
margin-left: 20px;
font-weight: 200;
font-size: 12px;
}
Thanj frustration struck again. But once again the loop went from bad to good.