New CSS Viewport Units You Should Know to Improve Your App/UX and That Solved my UX App Problem

Hello everyone, how are you today?! I hope you are well!

Today I would like to talk and share a problem that occurred with me and my project and how I solve it!

And you've probably already done this in some project or if you haven't, don't worry, I believe that one day you will come across this situation!

So let's understand the scenario and improve our knowledge!

🚧 Knowing the problem!

I've been working in a project for a few months and the project basically will be:

A site called: "DevTab Daily" and it will show us developers news of what's happening and it's at the top of searches on sites like: Github Trending, Dev.to, Awwwards and some others! You've probably already come across a site like this, but as I like to always be developing with Angular and doing projects to practice, I liked the idea and I'm implementing it!

In the future I'll share the project with you and I hope you like it!

Buuuut

In this project, the dashboard screen that has the list of tabs with cards, I want it to occupy 100% of the height of the browser screen, simple right?!

Probably (and like me) you quickly thought:

• Easy, we just need to add the 100vh measurement and our problems are solved! Whereas 100vh is 100% of "Viewing Height"!

And that's how I did it to make my layout how I would like it and I implemented it in Figma! And as we can see below the results was really good and 100vh works like a charm:

📱 Chrome DevTools: Mobile 365x667

💻 Chrome DevTools: Notebook: 1280x748

But when I opened DevTabDaily with the simulator and with my cell phone the problem started, below you can see how the application opened in the cell phone browser. If you look at the last card with the image, you can see that the image is superimposed by the browser bar even though it has the property 100vh.

This is normal behavior and varies from browser to browser and cell phone type too!

And with that, my application behaved differently than I expected and caused a bad user experience!

Soo, how can we resolve it?!

🖼 CSS ViewPorts

We can solve this easily with our friend CSS and some properties from View Port Units!

But first, let's understand how it works and see the difference between them, so let's understand:

• Small Viewport: svh
• Large Viewport: lvh
• Dynamic Viewport: dvh

🧩 Small Viewport: SVH

The small viewport represents when the browser has not been scrolled and the UI bars are still in their default state (not yet hidden). Below you can see the image representation:

🛠 How to use it:

Only in the height css property do we need to use svh:

.your-class {
  height: 100svh;
}

🧩 Large Viewport: LVH

The lvh represents the height of the viewport after the application has been scrolled and the address bar UI has been modified by reducing its initial size. As below you can see the example:

🛠 How to use it:

Only in the height css property do we need to use lvh:

.your-class {
  height: 100lvh;
}

🧩 Dynamic Viewport: DVH

As the name already said, the dynamic property makes the height behavior dynamic, so the behavior will be the same when the browser bars are hidden or not. As below you can see the variation:

🛠 How to use it:

Only in the height css property do we need to use dvh:

.your-class {
  height: 100dvh;
}

Cool right?! We have some different options to work with view port with only css but maybe they are not well known to us developers!

Now, let's resolve the DevTab application problem!

🛠💥 Resolving the DevTab problem:

Now we know the options to solve the application problem that is the browser bar overlapping cards!

I want to make the viewport dynamic because I don't want to worry about what state the browser is in, like for example:

If it has already been scrolled and the bars hidden or not!

With this I will use the dynamic option and it worked like a charme, take a look in the difference!

🎯 Before

🎯 After

I put the application in Light Mode to make it easier to see the differences in behavior!

If you look at the images, it is possible that in the first image the cards have the browser bars superimposed, giving an impression of being "broken".

In the image below, you can see the end of the card above the browser bar, occupying the entire viewing screen and improving the user experience.

I hope you enjoyed it and with this article you have a different view now when doing something taking up the whole screen!

Any questions, suggestions or anything else please comment!

It will be a pleasure to talk and exchange knowledge/experiences!

See you soon 😃😄🤟🤟