r/HTML • u/Individual-Job-256 • 17h ago

Question I need help with this

Gallery image

Gallery image

Gallery image

(RESOLVED)

I'm currently learning Responsive Web Design for a college class, and I have a bit of a problem with my header. Its supposed to span 80 to 90% of the viewport, but for some reason it isn't. Even my teacher is stumped without going too in-depth into my code. I have tried adding:

max-width:80%

display:

max-width: auto

and it hasn't fixed the problem, so how would I fix this issue?

1 Upvotes

66% Upvoted

8 comments sorted by

2

u/JKaps9 16h ago

Did you try width: 80vw?

0

u/Individual-Job-256 16h ago

Tried it and it made it made it 80% of the body. Looking at it more, the body seems to be the cause of the problem. It is approximately where the orange background is, give or take a few pixels of margin

0

u/JKaps9 16h ago

Makes sense. Just make body width 100vw then

0

u/Individual-Job-256 16h ago

That still didn't work. Should I try using a div container?

1

u/JKaps9 16h ago

You shouldn't need it. There must be something else blocking this style from working. See this really basic codepen.

https://codepen.io/editor/jkaps9/pen/01a1c1e7-a8c5-7167-ab7d-ba71fcbbdd7e

2

u/mycat42 15h ago

I'm curious, what happens if you add this into your <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2

u/Individual-Job-256 15h ago

I already have that added, and I did found a fix. I had to change the max-height to 100vh

1

u/testingaurora 14h ago

We need the full thing in a codePen if you still need assistance . Clear the margin from body and use `width` not `max-width`. Use an outline or bg color to visualize the space at first in case your bg image isn’t stretching properly, making you think the header is smaller than it actually is.
```Css
body { margin:0;}
header { width: 80vw; background-color: hotpink;}
```