New CSS Viewport Units You Should Know to Improve Your App/UX and That Solved my UX App Problem
Tags: css, webdev, codenewbie, frontend
Published: 2023-08-29 16:27:54

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vaouuv2l5wy59lsolm3.gif)

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t85zt03olaeg0udaxon.png)

#### 💻 Chrome DevTools: Notebook: 1280x748
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ibyrmg3ptddk6sfzzl1.jpg)

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**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk0fnvq6mqmon70h4d6s.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geyuamb5n7mcsne0p9pp.png)

#### 🛠 How to use it:

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

```css
.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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvsa67x87qv6jrjaulz1.png)

#### 🛠 How to use it:

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

```css
.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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa6pk3ulmpxoutw2wdtj.png)

#### 🛠 How to use it:

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

```css
.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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibrn2nazwete6yetf6u3.png)

### 🎯 After

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/car0vodgoefp2ljo2chj.png)

> 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 😃😄🤟🤟