This man is the reason I use Webflow!

@OOOHYEAAAHH

4 жыл бұрын

U are geh

@chappardababbar

4 жыл бұрын

Me too - he's so good.

@Bruhfinally

4 жыл бұрын

Came here to say the same

@Bruhfinally

4 жыл бұрын

I’ll add that I’d watch if I didn’t use Webflow

@pavakpatel

2 жыл бұрын

lmaoo so true

This narrator is the freakin GOAT

The quality of these video tutorials is insane. Kudos to all the Webflow team. I'm sure there is a lot of work beyond this presenter.

Saw a comment saying, “Add bigger breakpoints.” Now they’re here. Really awesome how they listen to the community

Yes, finally! Thank you for adding this, been waiting for years - cheers guys! No more flimsy attempts at creating a layout that works for both 1024px and 2560px 😂

Hilarious and incredibly helpful as always!!! To me, THIS is the Webflow brand in a nutshell. So well done!

Your educational content is as close to perfect as it gets.

@shantellewright9337

Жыл бұрын

facts!

Yes!!!! I’ve hoped for this for so long. Thanks for continuous features and updates to the product. And thank you for injecting so much life & quality writing into these videos!

I love Webflow as product and a tool, but also for their excellent and clear (and funny!) tutorials.

How can someone be so smart and have such a good sense of humor at the same time this is rare guys

Excellent. Excellent. And actually, this clears the way to selecting which breakpoint has the star on a per project basis, allowing for a mobile first design. This makes me happy!

@jaywalker.

4 жыл бұрын

Please, Flowgods, hear this prayer.

I am loving the tutorials! Love the learning process, the Narrator has made the learning curve As smooth as possible

"-and then we faded to black, just a bit too early." Got me.

I love these Tutorials! Very educational and hilarious at the same time! 😂👍

Amazing implementation (as always) of an essential feature. I love you 3,000 Webflow

"Succulents. Are they still cool? I need to know." - now that's a site I can get behind

The best instructor on the planet!

Great stuff! You guys are doing things right!! Lots of content surrounding the product is great!!

This is incredible. I love your style of explaining things.

OMG! Finally. Thank you Webflow :)

This is such a joy to watch! And highly useful as well! Thanks man :D

This video is great even if you don't use Webflow and just want to understands responsive design. Awesome humour, full of useful information. Please make a tutorial about how to make tutorials once! :)

Thank you Webflow. You've saved me tons of custom code editing

This was so helpful! I had it sort of backwards. Love this guy btw!

Perfectly explained video as usual. I am really considering to start using Webflow. What I have noticed throughout all the videos on the channel is that there is none on search bar and how to, for example, filter things (e.g. movies) through the search bar. I would appreciate, and probably Webflow community, if you could do one in depth video on that?

Excellent video. Thank you.

this guy is hilarious and these are the best web dev videos I've ever seen.

I like the people behind these videos.. they are never boring...

Best tutorials ever.

He teaches perfectly!

I was just this morning cursing Webflows lack of widescreen breakpoints. Thank you guys!!!!

@lukeschneider8258

4 жыл бұрын

Me too looked up custom code for that this Morning 😂

@dustinkoop

4 жыл бұрын

@@lukeschneider8258 As was I, then a KZread video notification poped up!

great !!!!love his voice.

Wow, I haven't tested WebFlow yet in my development environment but man this is super exciting editing and the video tutorials are amazing. Great job WebFlow. Is there an easy way to drag the column widths side to side and reverse the column order? That is pretty important to know.

"Wanna see what it looks like on a 27" iMac?..........." - Hilarious

@blendibr9554

3 жыл бұрын

"that was the actual 27" imac...." - Amazing.

@triv4555

3 жыл бұрын

I actually died at this moment lmfao

HOLY OKAY I'M USING THIS

I love this guy badly

Hell yeah, finally!

Awesome!!!

Awesome video that 4K 60fps is smooth af!

@Webflow

4 жыл бұрын

Just wait until we get to 12K at 480 fps in 3D!

@dudedamnit

4 жыл бұрын

@@Webflow can't wait

So is it possible to change the actual layout of the page based on the different breakpoints, because once you move something through the navigation it moves on all screen sizes. For example if I wanted to have the side bar at the side but then want it at the top would I be able to do without CSS grid and and manually manipulate it for different breakpoints.

Do interactions cascade up and down as well as the rest?? Thanks a ton

Hallelujah !!! Been waiting for this for 2 years. Thank you guys! - Why am I so excited about this? QUESTION: When adding one of the new highger breakpoints it says "You cannot remove the breakpoint from the project once it's created" - Why would someone ever want to remove the breakpoint? Are there any downsides to having the breakpoints there?

@adambadzynski

4 жыл бұрын

I don't there there are any downsides to having larger breakpoints in a project. I think this is more of a backend issue for Webflow, I'm sure it's hard to delete an entire breakpoint from a project once it's created.

@Cyrigar

4 жыл бұрын

Technically adding breakpoints is adding more CSS, which can slow down your site in extreme cases. However, I wouldn't worry about that too much.

@JimmyTRUELOVE

4 жыл бұрын

Thanks guys!

how come the default desktop breakpoint is different for you and me? does webflow automatically decide that based on the working display? I guess yes it is, but doesn't this affect the consistency in design workflow?

Finally! Yesss

Hello, Thank you for your video. Because I've started webflow. But I have difficult with webflow breakpoint. I have to change the base breakpoint in webflow, but I cannot find an answer in anywhere. I'd like to change the base breakpoint from 1270 to 1440. What should i have to do. Thank you for your help.

Thanks for the entertaining and educational content you always produce. I have a quick question - what if I want to change the image from desktop to mobile? I can't seem to figure out how to do that. I can hide an image, but I cannot replace an image. Any help would be appreciated.

Higher breakpoints!! 😝🔥👌👍😎🍻🥂🍾

Looking for a way to scale text dynamically (ems/rems?) with canvas resizing...

Awesome! Now please bring multi-language sites/CMS.

Have you guys thought of adding display height as well as width? so that we can get a more realistic sense of what things will looks like a particular aspect ratios? its something ive always thought would be useful as regardless of this update I still have to check things on my phone if im using such things as 100VH in my styles.

@dustinkoop

4 жыл бұрын

This would be a major come up being able to see the height of the device. Even if it was as simple as a line going accrross the layout.

@MrLinknel

4 жыл бұрын

@@dustinkoop I agree, my thought was to just have everything below be covered by a semi transparent overlay or something. Id be happy with either tbh.

@dustinkoop

4 жыл бұрын

@@MrLinknel ya, Similar to what Flinto does

Fluidity - Click & Drag to change between breakpoints is the best.

When I remove a column for mobile view as shown at 4:36, it just auto generates a column anyway and it doesn't change what it looks like. This is only for one grid I have, for another it works perfectly. Any fix?

This is great but I really hope they add a small laptop/landscape tablet break point. I find this area of screensize to be bigger issue than mega screen sizes. I have many clients that open their site up in a small browser window or small laptop and see issues and I can't adjust unless I use custom breakpoints.

My design looks good going down to every smaller device, but in a window on my computer if I make the window smaller it looks really bad... any tips on how to fix this??

He is legend

But how can I fixate the size of mobile version for instance on IPhone size view?

Can anyone help I used a long headline in the hero section like "Hi I'm Mayank". It looks fine in the laptop view but as I switched to tablet view it shows "Hi I'm" in one line and "Mayank" in the second line. Now If I put together "I'm Mayank" in the second line in tablet view, it is also changing in laptop view. What am I missing here?

How do you make changes on Desktop view only? As I was working on a website, somehow the changes I made on Tablet view changed my desktop too. I dont want to changed the desktop view only to have it cascade all the way down again and then make changes to tablet and downwards,

yes this works on texts. how about images?

Please... When is the offline version coming?

nice. I've hated doing my work on my ultra-wide and on my laptop.

Hi Webflow, I encountered a bug and I posted it in your forum, titled "Any project I have does not fold to tablet view". In your video at 0:58 when I click on the tablet breakpoint, it doesn't change to 768px, instead it changes to 985px -> which is almost the same as the Desktop. I have no clue why, I tried finding a delete button on the breakpoint or settings, but I cannot find any. I am stuck, can you please help me. This bug is really annoying because I can't preview in tablet quickly. Thanks.

Can I change an image or hide an object at a breakpoint without affecting other breakpoints?

@elihertig7032

3 жыл бұрын

Did you find the solution?

@TheDocPixel

3 жыл бұрын

Yes you can. Just click the “hide” symbol button (eye open/closed icon) in the layout section of the panels on the right

His got something, don't know what... but i fell in love

1:00 on a project i am currently working on, the styles and layouts do not pass down to any smaller device, at all! It's frustrating me so much, considering the amount of work i need to put in it to make it look good across all devices......though the classes still appear, none of the properties of those classes are retained, so i have to manually recreate them, every single time, at every single breakpoint, from scratch......why?

"But we made it work for tablet, mobile landscape, mobile portrait, and NES"!!!!!! That was perfect! LOL

@Webflow

4 жыл бұрын

Then you're in for a treat when you go to the mobile portrait breakpoint in Webflow and actually drag to resize the canvas to 256 px... 😏

In min 0:43 you talk about sizing and spacing and that fixing something on smaller views, will automatically generate a class. I don't see that class when fixing something on a smaller view. Base breakpoint already passed down a class and a combo class. Issue: my typo on base breakpoint looks fine, but it needs to be adjusted on smaller views. Do I need to create another class on smaller breakpoint, or is styling typography on smaller breakpoint enough?

@Webflow

Жыл бұрын

No. You do not need to create a new class when styling for other breakpoints. Just go to that breakpoint that you want to make a style change on, click on the element you want to make a style change on, then apply your style change. Hope this helps :)

I have experienced a common type of situation in which I have two columns, text on the left side and an image on the right side. Switching to the mobile breakpoint it drops the right column down. But I really would like to have the image on top. So I duplicate that column and disable it on desktop and only enable it on mobile. I change the order of the columns and then my image appears on top. My question: Is there a more efficient way to create a responsive column that drops the column you want to drop? On the column settings you can easily change it from multiple columns to one column on smaller displays, but not the order of the columns. I think it would be a nice feature to have it there.

@Webflow

2 жыл бұрын

Instead of using columns, consider using flexbox or css grid. More information can be found here: university.webflow.com/lesson/intro-to-flexbox university.webflow.com/lesson/grid-2-0

for overriding styles, can we make paragraphs be different on different break points

@Webflow

2 жыл бұрын

Hi Areeb! Yes, you can apply different styles at each break point. Please note that styles cascade down. So if you want a style to apply to all break points, start at the "all breakpoints" setting. Then move down to Tablet to create new styles which won't affect the desktop breakpoint.

Hello webflow, Everytime i tried to preview on larger screen the whole page blurs When i go to back designing mode it becomes clear again

I always find myself back in webflow haha

When will we EVER get to customize our breakpoints?

why is preview size is not the same when you publish it?

Would be awesome if we could display different content for different sized devices rather than only be able to make changes to style and sizing.

@lucgrandemange2496

2 жыл бұрын

actually I was surprised that they don't mention it in the video, but the trick is to use the display parameter. You just copy-past your element so that you have it twice, lets call em A and B, and you make the changes you want on B(this will be the "different content" you're looking for). If you want element A on a certain screen size, then dont touch anything and let its display parameter be on block(or inblock) and put the display paramater of element B on non-visible. and vice-versa beyond breakpoints in which you want content B but not content A

Hi , please what if we did a lot of changes on tablet and we want to apply them on a laptop ? how can we did this without remake all the changes one by one

@Webflow

3 жыл бұрын

Hi, SQUAREVISION! Changes made on Tablet only affect Mobile landscape and Mobile portrait, as it's designed to prevent changes on smaller Tablet screens from overriding things on the Base breakpoint (Desktop). We're hoping to make this more versatile in the future, but for now, unfortunately, this means you'll have to reapply the changes you made on Tablet to the Desktop breakpoint. 😞

Finally.

Why can't I have custom breakpoints!? Why do you limit us?

Somehow, whenever I remove a grid column or row, they remains visible (greyed out when editing and visible when viewing the page), unlike in this vid where they immediately disappear. Anybody any thoughts on this?

@Webflow

2 жыл бұрын

You may have some grid child elements spanning across more columns than you have specified in the grid settings. Once you find the elements that are spanning too many columns, try having them span less columns. This should fix the issue. Hope this helps 😁

You come for the tool, stay for the teacher.

Ya got me with NES 😂

4:33 my current case

It seems really annoying to manage COMBO classes across different breakpoints, and I can't find any tutorials from WF that address this type of styling method

How to add a smaller breakpoint for older mobiles?

@Webflow

Жыл бұрын

You can either add it using custom CSS code or use % or VW based units in your styles.

Finally

What I i see in the designer mode is completely different from what I see on my devices. I mean it looks clean in designer mode but messy irl.

Breakpoints in webflow are the best shit what happend in this pandemic times.

Can I scream? Forget about asking I will scream YEAAAAA

me watching this about breakpoints and being on a 21:9 ultrawide monitor LOL

please add NES breakpoint, thnx 👍🏽 also LET ME CHANGE THE BASE/ PRIMARY BREAKPOINT PLZ

@Webflow

3 жыл бұрын

The NES device width fits nicely within the Mobile portrait breakpoint, and is there in the Designer today! 100% with you on more control over breakpoints - this is something the team is building towards in the future, so stay tuned! 🚀

NES :)

Do you think he just happens to read books that are only white and grey in colour? Because that's what it seems like

Need 991ps break point

I don't think style changes cascade both up and down. Style changes only cascade down. If you add a breakpoint, it inherits every style above it. Also, breakpoints is a bad name because breakpoints have different meaning.

We covered a lot. Because it's a lot to cover 🤷‍♂

"Succulents, are they still cool?" I need to know....

Anyone find the NES Break Point Easter Egg LOL...

@Webflow

2 жыл бұрын

😀

That's called adaptive layout, not responsive layout

For NES? LMAO

So am I right in saying that the default 'Container' you can drop in can now have its width changed?

@Webflow

4 жыл бұрын

Yes! You can now change the default maximum width (Max W) on each breakpoint for the default container element. 👍

@JimmyTRUELOVE

4 жыл бұрын

Webflow I want to bear your children