Tea Cozy Project Review

Hi there!

First time of asking a coding question in a forum, I’ll try to be as precise as possible. I fought through the Tea Cozy Project and I do have some questions regarding the biggest struggles I’ve had so far.
I have uploaded my solution to codepen, here’s the link: https://codepen.io/bg4496/pen/vYNaeQq .

My HTML/CSS is attached as a file for you guys, just to get a better overview. My questions or problem statements are:

  • worst part: the locations section. I couldn’t position the Locations <h2> straight above the vertically and horizontally centered flexbox “address” items. When using flexbox I could only align the <h2> next to the addresses, when using width: 100% I could achieve a line break, but then the <h2> is not properly aligned vertically, it just sticks to the top of the parent container

  • setting the <nav> elements flex property to flex: 1 only aligns the elements properly, tried hard to understand the concept but just accepted it in the end. :sweat_smile: but after applying this, the wrapping behaviour got quite weird and looked like this:
    weird wrapping behaviour
    (only setting flex: auto after trial and erroring around solved that issue)

  • any general bad practices that can be found in my code? Overengineering, easier <div> structure for example

Hopefully, that’s not too much for one forum post to deal with. I appreciate every answer, keep learning friends. :blush:

best regards,
Basti

1 Like

Nice work! It’s always interesting to see what people include in the footer. Some times it’s just the copyright and other times it’s all the contact info and copyright.

You can consider using SECTION tags instead of all DIV tags since they are sections of the website. Then you can use the DIV tags for divisions within each of the sections, when needed.

About the Location heading. I always suggest adding a background color so you can see the dimensions of the h2. So do something like this:

#locations.flexcontainer h2 {
  background-color: #aaa;
}

If you do this you will see there’s a lot of empty space below the H2 tag that you can move the Location heading. Since its parent is using display: flex, then it can use a child property like align-self. Then you can tweak the final position with margin.

#locations.flexcontainer h2 {
  align-self: flex-end;
  margin-bottom: 30px;
}
1 Like

Hey there!

Sorry for not coming back to you earlier, but your hint on the align-self property really helped! I tried to solve bugs by using Chrome dev tools. That’s where I saw the empty space below H2 and didn’t find a “pretty” solution for this.

I think the flexbox inheritance behaviour, giving special properties to direct children only, is something I had to wrap my head around by quite a bit.

So thanks a bunch again for your feedback! :wink:

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.