Streaming live at 10am (PST)

VH units not consistent when hitting breakpoint 🥺

Hey friends. :sob:

Most objects on my portfolio site are set up with VH units, so I can make a decent responsive experience. It works for the most part except for this one container.

For some reason, it becomes gigantic on switching to a smaller breakpoint, even though the VH values are the same. I want it to remain the same size. :angry:

Here are some images illustrating the problem:

And here is my portfolio in designer (read-only), so you can help me diagnose the problem.

Any idea? I’ve been getting a headache over this.
Will mail cookies. :cookie:

@Preet_Dalal Your site is sooo cool. Love it.

As for the issue, I’ve had MUCH better luck using vw versus vh for this type of responsiveness. The preview window can create some odd feedback simply because it’s as tall as your browser window. The width is a more accurate measure, especially for mobile devices.

@LunarLight Thank youu :smiling_face_with_three_hearts:

The reason I’m using VH is so I can account for different aspect ratios. So, by reducing the height, it will shrink the whole design, while reducing the width will crop the design.

For example:

I’d like to continue using VH if possible! As you can see, the VH is working for every other element, but does not work for that textbox container when passing the first breakpoint.

Any idea what’s wrong?

@Preet_Dalal There’s a transform applied to those containers. The z-value is still in pixels. If that transform in the tablet breakpoint is deleted (merely as a troubleshooting measure), the box takes on a more proportionate shape.

@LunarLight :open_mouth: You’re totally right! Thanks so much.

Can someone explain to me how a change in breakpoint could affect the value of the Z-Axis? I figured that the Z-Dimension has nothing to do with the width and height of the window, so I chose to keep it in pixels.