Hello,
I am still making my portfolio project, however, there is one huge problem I keep running into. I need some understanding on view-port units (vw + vh). I am trying to get the first section of my portfolio to 100vh on the section. However, when I do this I have to scroll down to find my button which is an anchored link to my next section.
Furthermore, I am just lacking some core concepts of understanding height elements on parent containers. For an iPad with dimensions of 800 x 1280, why is my 100vh set on the creating 1280 pixels on my section in developer tools which I then have to scroll down to see the bottom of the page?. I thought 100vh was supposed to be the height of the screen size of whatever the person is having? I shouldn’t be scrolling down at all on my page if I have 100vh set on the parent container right?
I am majorly confused about this. Here is the link to codepen and my project. Keep in mind, I am not finished with it and this is one of the big things that is sucking up my time. I am just sitting here spinning my wheels trying to figure this out. Thank you!
Codepen:
https://codepen.io/coe9257/pen/PoPdJQv
100vh means that you want it to be 100% of the Viewport. A viewport is how big your screen is. If you are on a PC, you can modify the viewport by just changing how big the window of the Browser is.
While 100% is the 100% of the container. Every HTML is always in a container. If not a div container, a body container.
1 Like
Thank you for the reply. Where I am getting really confused is when I am putting the dimensions of a 5.5 inch long phone into the developer tools for the view-port height. I am trying to look at the viewport dimensions of phones and tablets online, however, when I put them into the developer tools the dimensions are three times longer than the actual phone.
For example, the Iphone X which is 5.5" long from this site listed below shows a viewport height of 812. I put this into the developer tools and I get a box that is 9 inches in height which is 3.5" longer than the phone itself. What am I missing here?
https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html
Yes, It’s not going to scale to the real phone, because it is either zoomed in or zoomed out. As it is displayed in this image.
1 Like
Oh crap, I am using firefox and do not see a zoom button. I am going to have to figure this out. Thank you so much for the replies!
Here, I can help you out. On Firefox they do not have the zoom button, but you can actually zoom in and out using CTRL + "+" and CTRL + -. Here’s what it would look like after being zoomed out.
1 Like
I am still getting way bigger dimensions on my viewport than the device. This is set at 100% and is 9 inches long for a 5.5" long device. I know I am doing something wrong but I just do not know what it is! 
Owh yeah, I forgot to mention, after you put it on developer console, Don’t Forget to Refresh the page. So it will scale it.
I have no idea what is going on in my end. All the videos online show different dimensions then what I am getting. I put it at 812px. Zoomed to 100%, hit refresh. It is still showing it at 9 inches long for a 5.65" device. I tried it on Chromium too and it did the same crap.
Here is a picture of both fire-
fox and chromium, you can see the zoom at 100% on chromium.
I tried i
I don’t know what’s wrong there. I did a little comparison. May be instead of using Responsive, Use the IphoneX preset like the one in this image
I even tried using Firefox Developer Edition as you can see ↑ here.
1 Like
So weird, why does this happen to me???
1 Like
But it doesn’t really matter right? because vh will be responsive to the device viewport.
I am not sure if it does or not. Is that 9 inch height display show exactly what will be displayed on a 5.5" phone? Furthermore, I can’t tell if the font is readable or looks good etc…
You know what’s funny, I just figured out why you have a little bigger width. Because on your firefox, you set your width to be a little bigger than the on on chromium. On firefox you set it to 483 but on chromium you set it to 400. I can’t believe I didn’t see this 
1 Like
haha funny. I just wish I couldn’t figure out this freaking height problem! I feel like I am stonewalled until I figure this out.
