Responsive design on CMS-driven project pages - Build a custom portfolio in Webflow, Day 8

[@Webflow]

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

[@marisarae766]

These tutorials don't get enough credit. They are so well-paced, informative and structured that you practice skills without even realizing it. And the humor is on point. Thank you for making learning enjoyable!

[@TheFarzadrsadeghi]

Flex child grow if possible @ 3:10 not working. still looks the same....lol problem not solved. Grimur we need you !! ***Edit ( you have to set the collection item to flex as well)**

[@ashleysouffrant1320]

Thanks buddy, much needed! Spent over 30 mins on it

[@TheFarzadrsadeghi]

@@ashleysouffrant1320 I gotchu

[@mich9639]

thank you!!

[@kaleb-oldaccount]

legend

[@person81045]

What worked for me was to do it for the desktop first then everything cascaded down to other sizes.

[@jrpcreative]

I'm having trouble right around 5:17. When I change the height of the project image it shrinks down the width on everything too. This is probably a mistake from a previous lesson but I'm hoping someone can tell me what I did wrong and how to fix it. 👍

[@jrpcreative]

Answered my own question. I had "Collection Item 2" set to a horizontal flex box instead of vertical.

[@imiweb1]

Content is so engaging. Well done to the webflow team. Also big props to @grimur I await his end credits scene with anticipation each time! 😄

[@person81045]

Nothing happens to my div block resizing to "grow if possible" from 3:09. He did it on the tablet size, but you should do this on the desktop size.

[@Webflow]

Please post your question and read only link on the Community forum so we can look into this further. discourse.webflow.com

[@mattiasbernodt3784]

Hey! love these tutorials! But I stumbled upon a little issue.. I was wondering if there is a way to individually change the images position?, when they are in a collection list so to say. Because if I do it now they obviously all change if I change one, and since there are so many different projects and sizes it's pretty hard to have a photo that works great for all the different formats. Do you guys have a workaround for this? Take care!

[@mrsigne234]

Have the same issue! Thanks in advance Webflow

[@brandeddad1207]

Hello! Say me please what is the music in the very beggining? It's amazing, I mean this sound. Thanks

[@JdotCarver]

"And even NES." 😂 I did a double take.

[@milosapostolovic3876]

One question, why are you avoiding columns. I have noticed that you are always pick grid instead of columns, even on the places where column would be better pick (in my opinion) is there any good reason for it? Yeah, I know this was two years ago, but I came from the future, just like you guys. Great tutorials btw

[@Webflow]

Columns use the old "float" CSS property which is very limited to what is needed now in the age of responsive design. Using grid or flexbox allows us to change an elements position based on different breakpoints.

[@catherinegarhez8601]

My middle collection item actually has bigger height than the rest :'( how to fix it?

[@Webflow]

Can you please post this question on our community forum - discourse.webflow.com . Also, don't forget to include your projects read only link - university.webflow.com/lesson/share-your-project-and-invite-collaborators

[@thejaysehansen]

I notice that your container has a margin of 30px which is great for responsiveness. But the Webflow container margins are locked? How did you override them?

[@Webflow]

Hi, Jayse! We've set the Container's padding; not its margin. Padding controls the space inside the Container, while margin would control the space outside. Padding should do the trick here - let us know if that works out for you!

[@xeler8r]

Oh! I feel silly. Thank you. Missed that! Your replies and vids are so insanely helpful!

[@Webflow]

@@xeler8r absolutely! Not a big miss - these things are advanced (they're the same CSS properties used by Apple and Netflix to develop for the web), so they can take some time to get right. Keep at it! We're here to support!

[@anupsarkar6326]

Great

[@Remjbbx]

First

[@person81045]

On 767 PX 100%, changing the margins on the Project Heading class does absolute nothing. Also changing the image size does absolutely nothing. Instead, it does affect downstream, just not the largest landscape size as referenced.

[@Webflow]

Can you please post a thread on our forums so we can look into this further? Make sure to include your project's read-only link in the post. discourse.webflow.com

[@sunnybhargava9627]

Beside making website ... i want webflow to make such thing that we can make 3d games without coding

[@nosekbk]

Soo... Unreal Engine and Unity...?

[@kireitonsi]

You mean a game engine to make 3D games without coding? Core is an option, look at it here www.coregames.com/

[@hyweltthomas]

Stop using pixels!! It's 2021...

[@Webflow]

Hi, Hywel! Can you please explain your thinking here? Pixels are widely accepted as a valid unit type in HTML & CSS, which you can currently find in structural and text/based elements all over Apple.com, Stripe.com, Google.com, Awwwards.com, and several of the properties on the KZbin comment section we’re typing through right now. 😍

[@hyweltthomas]

@@Webflow VW or %ages or even REM (if you want to reflect the visitors' preferences) are so much more responsive. Set up text size as VW in the Body - per breakpoint, then all text as %ages, and adjusting all text sizes becomes a doddle. I also use VW for all dimensions. In discussions on WF/Design forums, there's a lot of use of VW, slightly surprised you guys still use pixels. I don't think I've used pixels for years - apart from the odd burger box...!

[@graycrisp4701]

@@hyweltthomas I tbh agree with this since lots of platforms have been using % and vw/vh but I think this platform would be fine with using pixel since you don't really need to code yourself but more like controlling using with this web platform. you can also control the responsive with this. I haven't tried yet with vw and % with webflow but if you can use % and vw in webflow, I'm sure it's not a big deal. But, probably some people who have no basic knowledge people won't know about this.

[@hyweltthomas]

@@graycrisp4701 Absolutely, it's up to each individual as to what system they use. I have done several hundred sites with Webflow and controlling font size from the Body as VW is the most efficient system I have found. Let's face it, pixels are fixed, VW responds to the screen size, it's a no brainer for me.

[@graycrisp4701]

@@hyweltthomas Ahaha I only did with WP or just html/css/js myself, so this is very new to me using Webflow. But sounds like I can use vw and % for the text size? Then that's way better for responsive design I guess. Thanks for letting me know. I will keep that in mind to build my website with webflow haha I thought they 'meant' to use px for some reason cuz like you say... it's dead... people really don't use px any more except app design maybe? haha but still we use min-width and min-height for it. Anyway take care haha