Having trouble understand the view port

HTML-CSS
1

Tell us what’s happening:
So for the Personal Portfolio I need to do the next things

2. The height of the welcome section should be equal to the height of the viewport.

3. The navbar should always be at the top of the viewport.

This is what I understand and could understand about what a view port is: It is as large as the screen goes and can display the website.
The code bellow tells how big it should be onto the device

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

But then how can a nav bar be on top of the viewport?
and how to make a section equal ?

I don’t understand that part at all about this
Your code so far
https://codepen.io/maria-hoek/pen/zYYKNZK

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

  1. You can use the vh unit to set the height of the section to be 100% of the viewport height, i.e. height: 100vh (Viewport-percentage lengths)

  2. You can use position: fixed to make the header/nav sit fixed at the top of the page (position values).

1 Like
3

So I can just use CSS and use the positions?
Lol i thought it was something unrelated to it and needed to be set in only the meta data
thanks lasjorg :3

4

Yep, it’s all just CSS.

All requirements should have been covered in some part of the curriculum, at least I think that should always be the case.

Although it may have been covered dealing with something slightly different than the requirement. Like for example, I think the only place viewport units are shown is in the Make Typography Responsive challenge. So making the connection to the welcome section height requirement might be a bit hard.

The two challenges:

1 Like
5

Yes for sure you are right there:
The second challenge you mentioned doesn’t mentioned it is connected to the viewport at all.
Only a small part about “To the browser window”
which if you don’t know them well enough you will easely overlook our not make the connection at all :3

6

I finished the challenge thanks to you :3 it is appreciated

7

No problem, happy to help.

I guess that’s true. It might be worth changing the wording on that challenge to be in line with the challenge requirements.

Browser Window and Viewport are often synonymous however using them interchangeably may not be 100% technically correct.

https://www.quirksmode.org/mobile/viewports.html

1 Like