Off-Platform Project: Tea Cozy

Language Help
1

Hi I’m just looking for some support with the Off-Platform Project: Tea Cozy Project. I’ve really being trying to get my head around how this works but I just can’t get it!

Design Spec is here https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg?_gl=1p1letw_gaNTI0MTIwNDk0OC4xNjc4ODgyMTYx_ga_3LRZM6TM9L*MTY4Mzc5OTA3Ny4xLjEuMTY4Mzc5OTIxNy4wLjAuMA….

Link to code is here: https://www.codecademy.com/workspaces/645cbbc5e1a0c2d7379422c8
I feel like I’m a million miles away with this :frowning:

Issues I’m having are:

  1. How to make the header fixed without compromising the content
  2. I don’t know what I’m doing wrong to not get the tea of the month section to stack correctly?
  3. Same with the locations section.

Can anyone help with the above / is there any practice exercises anyone would recommend?

Thanks so much

2

Hi, Alex!

One thing to remember is that if you are struggling with a concept covered earlier in the course, it is absolutely a-okay to go back and refresh your mind on the topic.

  1. Earlier in the course, positioning is discussed (which included fixed headers) If you remember, when an element’s positioning is fixed, it is removed from the flow of the document. Because of this, all of the elements “shift up” to correct the new display. However, there is another positioning style that can be used. For example, I encourage you to look at Codecadem’y very own header.
  2. For the Tea of the Month section, you have flex set; you’re in the right direction. However, you want the elements within that container to wrap once they hit the container’s edge. If you need to go back to the lessons on flex, you should take advantage of being able to do so. But can you think of the style that makes your elements do what you need them to?
  3. For this issue, I recommend you place the div.locations-content within their own container. It would look like this:
<div class="locations">
  <h2>Locations</h2>
  <div class="foo">
    <div class="locations-content"></div>
    <div class="locations-content"></div>
    <div class="locations-content"></div>
  </div>
</div>

Apply flex to that container and then see if you can get the design correct!

If you continue facing issues, I would be more than happy to go into more detail. I prefer going with a more thought provoking tactic first. :slight_smile: