Responsive height doesn't work

Community resources General
1

hey guys
could you please tell me if I am having an issue in my settings?

please ignore every viewport and go directly to the Mobile view. if you drag the width to switch between screen resolutions, you’d notice that tabs and icons within the tabs are responsive. however the height of the tabs remain the same… and they look too long on smaller screens.

here is what I mean visually:
Screen Recording 2020-10-30 at 12.21.25 AM

here is the project link:
https://preview.webflow.com/preview/iphone-12-2a4be6?utm_medium=preview_link&utm_source=designer&utm_content=iphone-12-2a4be6&preview=3eb665599ff0fe47451adb905bcf17ef&mode=preview

Do you know where I went wrong??

2

I think I figured how to make sure that the Height becomes responsive:
by changing a Container’s height in VW.

However in this case the icons inside the container do not scale down proportionally…
Screen Recording 2020-10-30 at 12.33.28 PM

Do you guys know how I could fix that?

3

so changing the tabs height using VW instead of Auto has helped.
changing Tabs content to Grid.
the icon inside be of 50% width and Auto in Height.
text size 2.5 VW and 100%