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

[@Webflow]

Watch this lesson with the updated UI (as of August 6th, 2024) → kzbin.info/www/bejne/r32ulZ-qq7qdaNE

[@Webflow]

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

[@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.

[@MooChimp]

When you change the footer link block row height right at the end, I can't see the option for this. Has it moved?

[@Webflow]

Hello! Thanks for the question. The row gap controls are accessible once you unlock the gap controls. By default, they are locked so they both control column AND row gap values. But once you unlock it, you can access JUST the row controls.

[@MooChimp]

@@Webflow Thank-you I will check this tomorrow! I actually just posted another comment on your the CMS section of the 21 day portfolio course. Something strange happening with this too…

[@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

[@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"

[@drake_type_beat]

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.

[@drake_type_beat]

​@@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]

@@drake_type_beat 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.

[@drake_type_beat]

@@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.

[@awltattooinstafb3083]

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

[@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

[@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.

[@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?

[@Webflow]

Can you post this question and your project's read-only link on our forum? That way, we can look more into your project and help out! discourse.webflow.com/

[@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 ! ;)

[@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.

[@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