Website not scaling vertically correctly on mobile

Hey! My website looks great on desktop and responds well but on my iPhone 12 it “squishes” if you will vertically (attached a picture for reference). I set the main contents within the site to viewport widths and heights so that they all add up to 100 and fit any viewport. If anyone could help with this it’d be greatly appreciated. I feel like its an easy fix. Thank you!

Here is my site Read-Only: Webflow - Royce David

I will seriously cash app/venmo anyone 50 dollars who can help me with this

Hi, Joseph.

I would first ask that you please don’t enter into other unrelated threads asking people to come answer your post.

As far as your issue here is concerned, I would imagine that this has something to do with using absolute positioning on your Div Block 3 and HTML Embed 4. Doesn’t seem necessary in this type of layout. That, coupled with using a mix of VW/VH and % size definitions, and having both a static and a max width defined in your iframe is causing all sorts of erratic behavior. I would start by replacing the width and height on your Div and iframe to auto, and using static positioning, and see where that gets you.

1 Like

I’m sorry about that, I really appreciate your reply though, you are really helping me so much with something I’ve been struggling with for a long time. I did what you said. How do I center the html then? I was doing the absolute positioning just so the iframe was always in the center of the viewport.

No worries. Typically, the easiest way that I center an element on the page is just by adding Auto left/right margins to it. Webflow might warn you that this won’t work without it being inside an element of fixed width, but I’ve never seen it not work regardless.