Responsive Website In Webflow (Step By Step)

[@mohamedomer5200]

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.

[@grav3ns3n]

Just perfect, I understood everything. Thank you!

[@morris.5298]

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

[@jackrandall4679]

Why only on the hero section? And I've never seen 100vw cause horizontal scrolling, is it just a bug on some devices/browsers? Thank you for the info.

[@jayorcutt8673]

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

[@jevgenisuija]

Great tutorial for me, thanks man!

[@nuriada9518]

thanks! really useful and clear :) beginner here!

[@YohanPenny]

Dope shit.

[@faizurrahman7791]

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

[@cgrumler]

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.

[@SocialboutMedia]

Its preference and sort of "use case" scenario. REMs (root-EMs) are *usually* based at 16px because of the user's screen size (there are many). EMs take the element's font size. If you set both sides of the padding to "1em" and change the font size. Your element will scale with it. Its neat.

[@mastergamers6991]

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

[@otterguyty]

Great vid! 🍻

[@normaly8760]

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?

[@ekinoxconcept]

Really interesting video on rem

[@jonashanson1119]

Nice

[@oluwapelumiaraba7304]

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

[@nefermerenmut]

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

[@angelicojohnrago2878]

Arnauuu

[@ArnauRos]

👋👋👋

[@cacicv]

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.

[@muldoon67]

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?

[@FeelinErie]

There is a button on the top tool bar that allows code to be exported :)

[@klokkerholm1993]

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

[@thelion2078]

That's a prob I have, what about background video not scaling right. How do I fix that.

[@ArnauRos]

I missed that in the tutorial - you can edit that by changing the positioning of your background image :)

[@rociogarcia1121]

@@ArnauRos Is it a good practice to change the image at all? I mean, to set a display NONE to the full image (for desktop) and upload a new one for tablet and mobile (resized in Figma maybe)? Or it is not recommended?

[@sleevelessGamer]

456

[@humanoid144]

Doesnt work for me.

[@wodorify]

wft

[@Jessesmithmail]

Not a good tutorial and not up to Flux standards