Tea Cozy Problem

https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f3d4ee3a/projects/tea-cozy
https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f3d4ee3a/projects/tea-cozy

Hello everyone,
I am currently working on the Tea Cozy problem but I am facing a problem with positioning some of the items in the locations section and the footer.

Moreover, I can’t make the header fixed, when I put [position:fixed;] the header position becomes messed up.

Here’s the live website
https://itisahmedh.github.io/tea_cozy/
and the Github repo

Not all of us still have access to the path you’re on. Could you please describe what this positioning error actually is? Otherwise, I have no idea what is intended from the screenshot and what isn’t.

Could you provide a screenshot with the difference between the header’s position being fixed and not?

Thanks for the reply!,
I couldn’t edit the post. But here is the redline
https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg?_gl=1*13z9fsh*_ga*MTU2NzY5NDUzMy4xNjgyNjEzOTg4*_ga_3LRZM6TM9L*MTY4MzUwMTk2Ny4yNC4xLjE2ODM1MDU2NzEuMC4wLjA.

Here is the original header position.

Here is the header position when position set to fixed.

Applying a fixed position to an element will remove it from the normal flow of the document. This places it in a new stacking context and prevents it from respecting the applied properties of its parents elements. You can address this by giving the header its own properties for width and background color. You may also want to give the following elements a new margin to prevent them from overlapping.

I think the reason you are having issues with your locations section is because of margin collapsing:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

To paraphrase, because there is no content, padding, border, or in-line element between your teas and your locations heading, the margins of the heading is collapsing with the margin of the section, and essentially are acting as a combined margin, where the larger of the two margins wins. You might fix this by adding something as simple as padding to the top of your heading.

Thank you very much for your help, now I know where the issue is.

1 Like