Streaming live at 10am (PST)

How to use ViewPort correctly


#1

Hi all, and thanks for your time.

I´m trying to create a Onepage website for mobile, just for mobile, where some element must be over the fold always, regardless the size of the screen.

I have 2 questions here:

In small screen like iPhone 4 how can I maintain the CTA into the sreen.?

In bigger screens, like iPhone 6 plus, how can I position the CTA close to the finger of the user, what means close to the bottom of the page?

Thank you in advance

Issac


Here is my public share link: https://preview.webflow.com/preview/viewport-d79ac1?preview=244cd8402d4a61e5fd385277681a48cd
(how to access public share link)


#2

Okay, I just did the same exercise, here re my advices so you can try.

I achieved full screen cards for mobile and they looked quite identical on iPhones from 7 Plus to 4.

What I did is use VW unit for everything: font size, line height, margins, paddings, height, width... for everything in the page, and some values with VH for vertical control.

My advice is that you start to do so on the biggest screen you have. Pass all the values to VW units, fiddle with them until it looks like you want. Also make a good use of Flexbox, and maybe use position:absolute for the button so it always sits on the bottom of the screen, where you want it.

Once done, check the result on all your phones and continue to adjust.

Come back to tell us how it goes.


#3

Thank you very much . Im gonna try this. Absolut position for the button is a great option. Thanks


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.