Responsive Website In Webflow (Step By Step)

preview_player
Показать описание

Do you struggle to understand quick methods to create responsive design in Webflow?
In this video I will teach you how to quickly build responsive websites in Webflow using relative and responsive units of measurement.

📽️ CHAPTERS

00:00 - Intro
00:15 - Design Overview
01:02 - Viewport Width
02:22 - Responsive Text Wrapper
04:25 - Viewport Height
05:24 - Responsive Text
07:55 - Responsive Spacing
09:49 - Final Results

📱 Find us on SOCIAL MEDIA!

#webflow #webdesign #freelancewebdesigner
Рекомендации по теме
Комментарии
Автор

Great tutorial thank you, but I struggled for an hour or so on my background image not being responsive after changing the vw to 100%, it finally worked after changing the background image to a cover instead of custom in BACKGROUNDS sections of the HERO SECTION.

mohamedomer
Автор

Just perfect, I understood everything. Thank you!

gravnsn
Автор

In the HERO SECTION is better to use 100%, using 100 vw can cause horizontal scrolling

morris.
Автор

This was an amazing explanation of responsive design in webflow! Thank you!

jayorcutt
Автор

thanks! really useful and clear :) beginner here!

nuriada
Автор

If you did the same using only PX and VH/VW for the section sizes, the outcome would have been the same because the root element's pixel size didnt change. In that case, whats the point of using rems if you know, that the root element will stay 16px no matter what?

normaly
Автор

Any particular reason that you use REM's vs. EM's for padding? I've always struggled with deciding on whether to use REM's for padding / margins or use EM's for padding / margins.

cgrumler
Автор

Could we get assets for the website, or the figma file

oluwapelumiaraba
Автор

Do u need to add those parameters to all sections in your site or u can just do it with the container?

nefermerenmut
Автор

Thank's, It's saved my life😅😅

faizurrahman
Автор

Sir plz make webflow 2023 updtaed 2 to 3 hours long crash course

mastergamers
Автор

Can someone help me with one issue? I have a div that has content (text) in it and when i scale it down to mobile portrait, that same div doesn't increase its height as it should and final product is one mess where text overlays that div. I don't have any specific height to any of the divs in section.

cacicv
Автор

So when you click on the media icons at the top are you really defining (albeit in a much more user friendly way) CSS @media queries? Once the design is finished can you then export the HTML and CSS along with the media queries?

muldoon
Автор

What about the fact, that your background image only shows a lamp on mobile and not the beds? that not really responsive

klokkerholm
Автор

Not a good tutorial and not up to Flux standards

mokqnst