Tea Cozy project: Can't align footer

Hi, folks. I’ve been working on the Tea Cozy project and I feel like I have a handle on it with the exception of two issues: I can’t for the life of me figure out how to align the copyright text on the lefthand side of the footer, and I’m not sure how to get rid of the giant gap that appears between the Myrtle Avenue Tea and Bedford Bazaar Tea images. I welcome any suggestions you might have for me.

I noticed you had end after footer. If you move it above that will allow the copyright to align left, and adding in closing body and html

</main>
  <footer>
    <p>&copy; The Tea Cozy 2017</p>
  </footer>
 </body>
    </html>

Also, this is how I would account for the gap. Centering all the images and then placing a gap between them.

.featured-gallery {
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
  }```

Great Job! keep up the great work!
2 Likes

Hello! I literally just saw what robert did when i saw the code.

Allow me to explain the solution to the issue with the image gaps:

So basically space-around in flexbox means give me equal space between all of my items (for every line) it works well for the first line because there are 3 items. It looks different in the second line because there are less items, therefore, more space around the items. This is why robert recommended using the center alignment and just using a sneaky gap between the images, to center everything (both lines) and giving them the space they need.

For the footer issue, i’d recommend using flex-box to solve your issue (and closing the tag at the end). Allow me to explain:

Instead of using margins, try to use the justify-content and align properties. Remember there’s flex-end, flex-start, center, etc. You’ll see how easier everything gets with flexbox.

Screen Shot 2023-06-08 at 21.50.43
Screen Shot 2023-06-08 at 21.56.17

Try removing the margin-left and see what happens :partying_face:

You’re doing great! Keep up the great work.

2 Likes

Good grief, I’m such a dingus sometimes. I knew the solution would end up being comically simple. Thank you for catching what I was too lost in the weeds to see!

And your fix for the gap worked. I really appreciate you taking the time to respond!

2 Likes

Thank you so much for the detailed breakdown of the gap solution and why that works. I’m still grappling with flexbox design, and while I feel like I have a more solid understanding of it than I did a week ago, the why of much of it still eludes me. Your explanation made this part of it make sense.

And I’ll try your suggestion re: the footer margin. I appreciate you taking the time to educate me!

2 Likes