Vertical % reference ?

[mari133]

Hey, so I am converting px to % in order to get the spaces right.

In the Design file the screen size for mobile is 375 px wide. So 1% = 3.75 . If I see 25 px
Margin in the design file I can calculate it to 6.6%

But what about vertical. What does the percentage above and below refer to ? Is it the entire vertical screen size ?

Or am I doing something wrong here ?

Best
Marius

[Richard]

Dear Marius

@mari133

Is this % reference for images or text?
In general the % is being calculated by the parent container of said element.

So if i have a parent container that is 700px wide and the child container is 70% wide - The child container will calculate 70% of 700px.

You can see here:

https://www.w3schools.com/cssref/css_units.asp

% is defined as the percentage "Relative to the parent element"

---

Hope this helps Marius and best wishes for 2022! 🌻

Richard