Streaming live at 10am (PST)

Best Practices for Adapting Mobile Responsiveness


#1

Hi Webflow

I've been following all tutorials and guides but i have never come across one that specifically tackles how to adapt the desktop based design to different mobile platform screen sizes. I mean how to tone down image, size (should we use pixels instead of %, what is view port height and view port width etc), fonts and font weights? moving elements around due to screen size? etc

Please it will highly beneficial to this community and newcomers to webflow to understand perfectly how to shape their desktop website better suited for all mobile screens. Please direct me to the tutorial if it exists, maybe i missed it.

Thanks smile

cc: PixelGeek, cyberdave, vincent, sabana, brryant, thesergie, Arthur, AlexN, callmevlad


#2

Hello @brilliantlights! Here are some things that I keep in mind to stay responsive:

  • Use percentages when you can. (Divs, sections, height, width, etc.)
  • Don't set sections to specific heights and widths using pixels. Use percentages or VW (for width) and VH (for height).
  • Start adjusting things on laptop view , then tablet, etc. So that certain adjustments affect the devices below instead of doing everything over again.
  • When centering important elements (Like a loading gif to the center of the page) Use percentages, don't use padding within the parent section.

Hope I could help, let me know if you need anything else!


#3

Can you help me understand where I'd use percentages to center something as opposed to padding? I feel like I'm missing the obvious. Also, is it safe to say I can make a site responsive with adaptive features? I'm finding it difficult going straight 100% responsive without adapting some elements manually to the tablet and mobile screen sizes.


#4

Well, when I use padding to center something with 400px on each side, it will look good on my monitor. When I go to it on my laptop, the screen is smaller so it is pushed more to the right. Like when I make loading images, I center them by setting a position (Usually fixed) and then setting it to go right 50% and up 50%. Then I go to Transforms and set it to -50% on both.


#5

Please forgive me, but I don't see where I can adjust padding with percentages. Or are you referring to the values listed below the position panel? Thank you smile


#6

Yes, I am referring to the values under the position values. You can adjust padding with percentages by typing 13% and pressing enter. This is located under Display Settings. wink


#7

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