Responsive web design for beginners - Webflow tutorial (using the Old UI)

When you visit a site on your mobile device, you may see a desktop version of the site crammed into a smaller screen, forcing you to zoom and pan to see any content. Or you might land on a watered-down "mobile version" that lacks the content and experience that makes the desktop version superior. Hopefully, though, you see a responsive website - a design that reflows and repositions content based on the width of the browser.
There are 4 different aspects to responsive design we’ll be covering here:
1. Reflowing content
2. Fixed sizing
3. Relative sizing
4. Breakpoints (media queries)
----------
Get started with Webflow:
help.webflow.com/courses/gett...
webflow.com
/ webflow
/ webflow

[@---xb5yj]

These videos are excellent for a refresher, thank you. I took a class on beginning web design and this is helping me remember a lot of what I learned. 👍👍

[@cweb1988]

gosh.....this is the best educational content for web design ever.

[@lavalampprincess]

amazing pace, simple to understand, gets to the point and is beautifully made. thank you.

[@ScottGaul]

Nice video - thanks. I've been looking for a video like this to give to my client - a video that explains to my client what Responsive Design is. I noticed that nearly all the videos out there are for website designers. I think someone could create a whole set of videos for the Clients. So a website designer doesn't have to explain to a Client what's what.

[@Webflow]

Hi there :) Thanks for watch and also great idea! I'll let the team know.

[@noahglassman4220]

How do you implement resizing and breakpoints into already constructed rotational parallax in layered images?

[@Webflow]

Hi, Noah! Can you give us an example so we can give more detailed instructions? This might be a good candidate for forum.webflow.com, because KZbin doesn't let us upload pictures, etc.

[@robotheadv9]

Hello, amazing video, in my webflow i use percentage for my div which as an image and the size didnt change, can you help me?

[@jasdhaliwal8263]

The percentage should be for the image

[@sedkitlija6882]

i'm new to webflow and i don"t know if i should use percentage or px to get responsive design

[@Webflow]

Hi Sadok, percentages are better than pixels for responsive design. You can also use viewport units like vw and vh. It all depends how you are designing your page. Learn more about the various units you can use here: university.webflow.com/article/width-and-height-units For example, if you use grid, the FR unit is fairly responsive. Learn more: university.webflow.com/lesson/the-fr-unit That said, you can adjust the styling across breakpoints to ensure that every element is responsive and looking great on smaller devices. Check out the breakpoints video lessons: university.webflow.com/topic/responsive-design Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! You can reach out to our customer support team here: university.webflow.com/contact

[@furleysbrain]

yeah but when i change an element on one 'media query' it changes on the rest of them..

[@Webflow]

Hi Alex! What kind of change are you making? Styling changes apply to the selected media query and all smaller media queries, but not on larger media queries. So if you change the style on desktop, it changes on all smaller devices unless you've applied a style on those breakpoints. And if you change the style on Tablet, it changes on mobile but not on the desktop, again unless you've already changed the style for that particular property on mobile first. Element changes (on the HTML level) apply to all media queries. For example, deleting or reordering elements on the canvas (except for grid children) affects these elements on all breakpoints. You can hide elements on devices by setting its display to "none" in the Style panel. learn more here: university.webflow.com/article/intro-to-breakpoints Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble when designing your site, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2Tupw47), screenshots and a description of the issue), and our amazing community and staff can help you there.

[@helbecreative6885]

@@Webflow I have the same problem? I have an image in a text but it doesn't look right on mobile. So I moved the picture down a couple of paragraphs on the mobile desktop and it moved it down on the desktop site?