Tea Cozy project advice / improvements?

Hey all, I just finished the tea Cozy project and I’m a bit proud because I struggled quite a bit with positioning the Mission headers and navbar header, after that it didn’t take long to finish. There are still a few things I’m not 100% happy with but can’t seen to figure out without messing up the positioning as a whole I was hoping to find some help with.

  • The Mission background image doesn’t show w/o the padding set to 25%. I wasn’t able to figure out another way to let the section show/start below the navigation-header.

  • When I click on the navigation links it drops the page below where I want them to land (below the location and TOM h2’s. I think this might have something to do with the padding problem above, but I’m not sure.

*The h2 and h4 headers in the MissionPicture section look good at my laptop but when I open google devs and view the page in mobile there’s a thin line between the h4 and h2 elements. Positioning this is one of the two things that took me the longest and I have no clue how to fix the mobile view.

  • Last problem/question: is there a way to get some spacing on the right side of the UL / navigation (with or w/o changing space-between)? When I add margin or padding on the right of the ul tag the location link drops to a line below)

If there are other improvements I could make next to these things also feel free to give your advice.

This is my HTML file:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel=stylesheet href="TeaCozy.css">
</head>

<body>
<header>
    <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="TeaCozy logo"> </figure>  
    <nav>
        <ul>
            <li><a href="#MissionPicture">Mission</a></li>
            <li><a href="#TOM">Featured Tea</a></li>
            <li><a href="#locations">Locations</a></li>
        </ul>
    </nav>
</header>

<section class ="MissionPicture" id="MissionPicture"> 
    
    <h2> Our Mission</h2>
        <h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
        </h4>

</section>

<!-- Tea of the Month section-->

<h2 id="TOM">Tea of the Month</h2>
<h4>What's steeping at The Tea Cozy?</h4>

<section class ="TOM">
<figure>
    <img src="img-berryblitz.jpg">    
    <figcaption> Fall Berry Blitz Tea </figcaption>
</figure>
<figure>
    <img src="img-spiced-rum.webp">    
    <figcaption> Spiced Rum Tea</figcaption>
</figure>
<figure>   
    <img src="img-donut.webp">   
    <figcaption>Seasonal Doughnuts </figcaption>
</figure>
<figure>
    <img src="img-myrtle-ave.webp">    
    <figcaption> Myrlte Ave Tea</figcaption>
</figure>
<figure>
    <img src="img-bedford-bizarre.jpg">    
    <figcaption>Bedford Bizarre Tea </figcaption>
</figure>
</section>

<section class="LocationsBG">
    <h2 id="locations">Locations</h2>
    <section class="Locations">
<address> 
    <h3>Downtown</h3>
384 West 4th St <br aria-hidden="true">
Suite 108 <br aria-hidden="true">
Portland Maine 
</address>
<address>
    <h3>East Bayside</h3>
    3433 Phisherman's Avenue <br aria-hidden="true">
    (Northwest Corner) <br aria-hidden="true">
    Portland Maine 
</address>
<address> 
    <h3>Oakdale</h3>
    515 Crescent Avenue <br aria-hidden="true">
    Second Floor <br aria-hidden="true">
    Portland, Maine 
</address>
</section>
</section>
<footer>
<h1> The Tea Cozy</h1>
<h5>contact@theteacozy.com</h5>
<h5>917 - 555 - 8904</h5>

</footer>
<h6>&copy copyright the Tea Cozy project </h6> 

</body>


</html>

And this is my CSS file:

html, body, a, href {
    background-color: black;
    color: seashell;
    margin: 0;
}

header {
    display: inline-flex; 
    position: fixed;
    width: 100%;
    height: auto;
    align-items: center;
    border-bottom: 2px seashell solid;
    font-size: normal;
    z-index: 2;
    background-color: black;
    justify-content: space-between;
}


img {
height: inherit;
width: auto;
}


li {
    display: inline-flex;
}
 
section.MissionPicture {
    background-image: url("img-mission-background.jpg");
    background-repeat: none;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 40%;  
    padding: 25% 0%;
    display: flex;
    flex-direction: column;
 }

h2, h4 {
background-color: black;
color: seashell;
text-align: center;
margin: 0;
}

h2 { 
    padding-top: 2%;
}

h4 {
    padding-bottom: 2%;
} 

section.TOM {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

 section img{
    max-height: 200px;
}

figcaption {
    text-align: center;
}

section.LocationsBG {
    background-image: url("img-locations-background.webp");
    justify-self: center;
}

section.Locations{
    display: flex;
    justify-content: space-around;
    color: seashell !important;
    padding: 5% 0;
}

address {
    background-color: black;
    padding: 0 2% 2% 2%;
    max-width: 300px;
    text-align: center;
}

#locations {
    color: black;
    text-align: center;
    background-color: rgba(255, 255, 255, 0);
}

footer {
max-height: 200px;
width: 100%;
text-align: center;
}

Hi @board9472771590! I found some videos to walk you through this project. (you need to watch them in a certain order)

Watch First:
https://www.youtube.com/watch?v=nSRC9NIam6w

Watch Second:
https://www.youtube.com/watch?v=fJc18fT4T3s

Watch Third:
https://www.youtube.com/watch?v=9gVv0M0oTHE

1 Like

Hey Shane, thankyou for the links you shared! I like how he walks you through everything, but I miss the explanations about the why’s like with the code solution from codecademy themselves and both of them don’t make the layout with responsive units either.

I did figure out a way to position the navigation in the header better and set a min-height on the mission background in the meanwhile. The min height realization felt a bit stupid afterwards but I’m still having troubles with the small line of the background image between the h4/h2’s that only shows on mobile view. Even when I follow the instructions in the youtube video and add another section as a parent for the header elements to set the margin on auto. (When I delete text-align: center; it doesn’t align horizontally with the margin auto setting on an added parent section either)

Can you share a screenshot of your web browser?

Yes ofcourse! Here’s a screenshot from the mobile view. It doesn’t matter how much I zoom in / out in the normal laptop browser, the line doesn’t show there. I’ll also add the part of my updated code:

.MissionPicture {
    background-image: url("img-mission-background.jpg");
    background-repeat: none;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 30em;   
    display: flex; 

.Mtext {
    margin: auto;
    width: 100%; 
}
h2, h4 {
background-color: black;
color: seashell;  
text-align: center; 
margin: auto;
width: 100%;
}

h2 { 
    padding-top: 2%;
}

h4 {
    padding-bottom: 2%;
} 

Where do you see a line?

I highlighted it with the white square around it in paint so it’s easier to see. Between Our Mission and the header below it there’s a small line/gap where the background shows.

So you’re trying to take this line away, correct?

(Just checking. :slight_smile: )

Also, can you give a link to your project?

Hey Shane, I figured things out in the meanwhile! But thanks for wanting to think with me :).

No problem! :grin:

See you on the forums!