Header always bigger than screen size

I am trying to do the “Fotomatic” project and for some reason my element is always larger than the screen size when I test it on mobile in chrome devtools.

No matter what mobile screen size I use, it is always 410-414 pixels while all the other elements are sized correctly for the screen width.

Like the body element will say 375px while the header element is 410px

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 10;
}

I am so confused!

Edit: Looks like it is doing that because of

position: fixed;

But the project requires the header be fixed. Still very confused.

Hey there @shamslam845!
Can you share a screenshot of devtools highlighting the header css properties?

With just this info I can only speculate that the header is taking up all the width of its parent, if its parent is wider than the viewport then header will overflow.

The parent is body and it’s width is 375px.

1 Like

Alright, my advice, if you set something 100%, be sure to have set its parent size.
Generally if you set html width to 100% it will take exactly the width of the viewport. Always do that.
Said so, can you please check the width of the children of header?

Especially check div.content and then if it results larger than 375px let’s figure out which of its children is creating this issue.

Sidenote: what’s up with font-size: 100%? Was it your decision or you found it like this?

I set the html width to 100% but no luck.

It has something to do with

position: fixed;

When I remove that, it fits correctly, but project requires the header to be fixed at the top. It works for my desktop and tablet versions also.

The font-size: 100% is from a reset css sheet that came with the project.

Here is the content div.

1 Like

header is taking div.content width.
What is the width of the children of div.content? (a and each nav element)
Also, try setting in header.content the property max-width: 100%

Fixed it thanks!

Looks like an element was set as a fixed width far down the page.

I was only looking at the child/descendants of the header for the problem.

Weird that it wasn’t even a descendant of the header, but messed up the header size while all the other parent/grandparent elements of the fixed width child were the correct size.

I’m happy you fixed it! This is what the future awaits in CSS

1 Like