Intro to responsive web design - Webflow 101 (Part 7 of 10)

Responsive design is what helps your website content reflow and reposition on all devices - desktop, tablet, mobile landscape, mobile portrait, and the Game Boy Color. Responsiveness is arguably one of the most critical parts of website design and, in this lesson, we’ll fine-tune our site design to reflow perfectly for devices of all sizes.
00:00 - Introduction
00:20 - Desktop
01:42 - Tablet
05:54 - Mobile landscape
09:11 - Mobile portrait
13:30 - Test through all breakpoints
13:44 - Recap
13:56 - CTA: Upload a video of your responsive site using the #webflow101 on Twitter
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Go take the full course at Webflow University: wfl.io/webflow101
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@BeyondTomorrowNow]

my form in mobile landscape, one direction was made vertical stayed centered aligned and once alignment was ''stretched'' it did not stretch to the same length of the "Text Field"

[@awltattooinstafb3083]

how i can adjust size useing cursor like you did its any options to use it ?

[@niundisponible]

I am glad Webflow is working for this video. In my experience it gets way too slow, it lags and it often becomes difficult to work with because of that.

[@Copy0racle]

What do you do when the parents are set to flex but the child boxes are still oversized and not fitting in the landscape. I have bad children. when I click and drag I can see the outline of the boxes outside out the lands scape , they are not resizing

[@phazon6179]

In adjusting sizes for multiple screen sizes, you recommend pixels or relative measures like em, %, max width and such?

[@Webflow]

Relative measures are much better for a fluid responsive design.

[@janvarius4711]

@@Webflow I followed this tutorial word for word and when I got to the resizing stage the hero image completely fell out of whack and now everything including the navbar is screwed up. Did he use different containers for the different elements?? How do I differentiate

[@Webflow]

Hey@@janvarius4711! We used the "Container" class in all of the sections on the landing page (Navbar, Hero section, Logos, Cards, Form, and Footer), so when you make a change on the "Container" class, it will affect ALL of the containers in all of the sections. But for the Hero section and the Footer, we added a combo class to those containers called "Centered". We did this in the lesson where we built the website's Footer section (kzbin.info/www/bejne/ZoG2ZIRjjauDnc0). Can you describe which step you're experiencing the issue?

[@alexandrunistor8535]

@@janvarius4711 For it worked fine. Followed everything step by step and it works as expected. Step back and trace your steps, you maybe missed something.

[@kireevi]

You read my mind! I wanted to ask about relative sizes myself

[@adellen349]

If you manipulate '"all h2" class settings in tablet dimensions, will it influence the h2 settings for desktop, too?

[@Keepgoingdesigns]

No, the changes you make in the tablet dimensions will only affect the "h2" elements in tablet and down. The "all h2" class acts like any other class you can create, but are just already created by default.

[@user-lo9ed3hu3l]

I have a problem with web responsive , I tried many times but every time it doesn't work ,i tried video CB several times but to no avail. can u help me this probleme?

[@Webflow]

Can you post this question and your project's read-only link on our forum? discourse.webflow.com university.webflow.com/lesson/share-your-site

[@eotikurac]

yeah, even in this perfect scenario where everything was set up to work for the video and the website is only a one small page webflow starts falling apart. it's so amateurish. what is a real web developer supposed to do with the export of this? the only reason i got into this tutorial is because clueless clients are now pushing for webflow because they think it's premium. it's as bad as any other page builder. it cannot be anything else, and i should have known better.

[@Webflow]

Webflow was also built for developers. When you export code out of Webflow, the code is clean and ready for a developer to build on top of it. Here is an example: webflow.com/view-source For more information, check out this article: university.webflow.com/lesson/code-export Hope this helps :)

[@AlexMorellon]

Wow, those are strong words ! Curious to understand what you mean by "webflow starts falling apart".

[@eotikurac]

@@AlexMorellon i'm a dumbass 😂

[@AlexMorellon]

@@eotikurac Haha ! Alright then ,I can relate to the feeling ! ;)

[@WillieSims-df4fx]

This is so much better than building a bloated Wordpress site

[@shahmeerG47]

its not if you really know how to cleanly build a site using WordPress. Bloated WordPress sites are made by poor developers. There are bunch of bloated webflow sites as well made by poor developers. Nonetheless channel is from Webflow, the clean work is there because of that.

[@WillieSims-df4fx]

​@@shahmeerG47 I think that's the point though. I have minimal coding knowledge so I was forced to use many different plugins to get what I needed done. Some Wordpress plugins don't work well with others and having too many of them will start to slow your site down. I got the site working but it's much more time consuming and complicated than it should be. Maybe I'm being too optimistic but looking into the client first framework and the Webflow tutorials it seems like I can build everything I need and manage it much more efficiently than with Wordpress.

[@shahmeerG47]

@@WillieSims-df4fx This exactly happens when you watch pro developers with knowledge of explaining and making it look easy. Even though I am here because of a Webflow responsiveness issues. I still have alot to question. Being a WordPress developer I must say Webflow is limited alot. Like alott.

[@WillieSims-df4fx]

@@shahmeerG47 I think that depends on what you are trying to accomplish. There are many different types of websites with many different use cases. I have been developing websites for 20 years so I'm not a newbie I am just not a real coder. I am not a bad developer by any means. I am dealing with thousands of products and I can clearly see how using Webflow is going to make my job 10x more efficient. The only problem is the learning curve to understand the platform.

[@natureandmus1c]

This lesson is little bit misleading, I do not think you can do everything explained in a video with WebFlow. For example, i tried to make my site responsive, but after i done i was not able to move A4 paper sheets and flowerpot without hands and fan usage, as Grimur did in the end of the video.

[@mariaisabelgomez9561]

I am making changes in small devices and it modifies the whole design!... I have been doing this for hours now, isn't it sopposed to change only from bigger to small devices?