Fixed Header Responding to page resize; body not

I have got a fixed header, when when the screen is full size, works fine. However when I shrink the screen (window) the header responds correctly, but the main content doesn’t respond to the header changing size. Any thoughts?

can you show some image samples?

Sorry, I could only upload one pic. This is a pic when the window is full size. Note the title ‘Tom’s Cheat Sheet’ and the picture.

And another when the window has been resized. The title and picture overlap…

Aha! Ok, it’s still a little unclear as to what you want the css to do.

You can try changing the colors and set outline on each element to see how the page is interpreting them. That way you can pinpoint if what you want is happening.

For example: if you don’t want you body content to have minimum proportions that don’t get distorted you can see if your css is doing that this way, and exactly how it’s not (this in turn, let’s you add specificity to your question for yourself and for others and gets you closer to your goal).

When you do this, I also highly recommend using the firefox browser and use the element picker (in inspect element: com+opt+c, or com+shift+c, or the mouse over window button on the top left of the console). This can not only highlight your element, but when it has errors you can click on the css to direct you to the relevant mdn documentation which is super clear.

As a bonus tip, I recommend Kevin Powell’s youtube channel on css as I find he has an incredibly clear way of explaining topics that I haven’t seen in other places.

2 Likes

Note, there’s a difference between setting outline and border, border actually changes the size, so for debugging outline is better.

1 Like

Thank you. I’ll have a go at what you suggested and get back to you. :crossed_fingers:

The fixed position property is always relative to the view port of the window.

1 Like