Streaming live at 10am (PST)

Mobile Responsiveness


#1

Hi, I would like each text field inForm on My Contact Page to take up the whole container width in Tablet and mobile landscape and mobile portrait view. When I add a div and nest all the text field this works but the style also gets apply to Desktop view. Adding a class to just tablet also gets apply to Desktop. How can I can I get my top row with my “Name” “E-mail” and "Phone field " to appear on the first line together in desktop and in the other views to each have its own line.
Thank you for any assistance your able to offer on this.


Here is my site Read-Only: **LINK**https://preview.webflow.com/preview/brits-construction-project?preview=c2602ebef5226789716afb7dcac79199
(how to share your site Read-Only link)


#2

Hi @BLam1

2 options here, you can keep using the columns you have setup at the moment, you just need to change the layout in settings under tablet portrait so the columns run full width
image

You’ll also need to look at the styling you have set on each text filed as at the moment they are all running different widths so when you get into tablet and mobile views they do not align vertically. I would set them all to 100% width and then class the columns so you can remove the 10px standard left and right padding from tablet and below.
For more info on columns and how to make them responsive check out this link, https://university.webflow.com/article/columns

Other option is Flexbox instead of columns, more on that here: https://university.webflow.com/article/intro-to-flexbox

Let me know how you get on?


#3

I’ve created a preview so you can see how to do this with columns.
https://preview.webflow.com/preview/digital-mast-webflow-examples?preview=0f1b1f4bc334410a22137790eb912683

Hope this helps :slight_smile:


#4

Thank you this worked. I was looking for this Tablet Portrait view last night but it did now show up Under Settings. Settings only had “Row Settings” “Gird options”(without the different views) and “Custom attributes” and everything else following “Custom Attributes”.