GRID OR FLEXBOX 4 this mobile design FORM?

:wave: HI:

Sorry, rookie here, how can I design the form on this website ?

I have the Desktop version, but I HAVE NO CLUE how to make it work in mobile view, can you ya’ll help me ? I will provide my website and the original, please view the form in desktop and mobile view on both sites to get the idea on what I’m trying to do. THANKS :v:

ORIGINAL SITE: https://myershomebuyers.com/the-myers-difference/

MY SITE: http://motion-715510.webflow.io/the-numbers

Are you looking to design just the single line email address form that is at the bottom of the page from the “original site”?

Hi Brandon, actually the no, I looking to recreate the table above that, the table with the numeric info, desktop view works, BUT, the mobile view is terribly wrong, I’m wondering how I can match the mobile view of the original site for the numeric table ?

Please add screenshot + the specific url of your example (What form? What table?)

You talk about pricing list?

In the url example you like each “table” row is separate flexbox row VS your example (In your example you use 3 cols so on mobile the layout stack and “terribly wrong”).

Row 1:

avarge time (col) - data1(col) - data2(col)

Row 2:
Average commissions (col) - data1(col) - data2(col)

On mobile the layout stack:

avarge time (col) ’

  • data1(col)
  • data2(col)
Average commissions (col)
    > data1(col)
    >  data2(col)`

I can’t quite understand your comment, I have provided detailed info and URL’s to both the original site and my site, I’m seeking help in how I can build the form the original site has. My form looks the same as the original site in DESKTOP view, BUT IN MOBILE view NOT, Hopefully someone can help.

thanks.

THIS IS NOT A FORM. No one can help you without correct details (So add screenshot please). The only form in the url is the email one line form.

Right! my mistake, form is not the technical name of the object in this case, I was referring to the structure cosmetics, correct list its better.

1 Like

@Netmen Tavo, that is custom CSS on the Original site, but you can duplicate that with CSS GRID!

Add your share link for the site you are trying to build.

But using Grid that’s in Webflow, it would be SO much easier to get that effect. On Desktop you would need 3 columns with 10 rows. On mobile you would just need 2 Columns.

https://preview.webflow.com/preview/grid-price-table?utm_source=grid-price-table&preview=998ebee14f47669be865533159aa6f25

Check out this share link. Just created for you. If you want send me your email and Ill transfer the project to you.

2 Likes

WOOOOOOW ! this is AWESOME Brandon, MAN ! thank you very much for this !! :sob:I just could never figure out man, thanks for the link, its going to be SUPER USEFUL. Thank you brother man I appreciate your help very much :fist_right::fist_left: