▼
Streaming live at 10am (PST)

Flexbox for responsive design

#1

I really like flexbox. It makes layouts a snap. I can't seem to find any info on how to make flexbox responsive. I watched the tutorial with @PixelGeek on Youtube and he was able to make the boxes stack on one another but it does not really seem to operate the way column do and with the control columns allow when changing media queries. To truly have the responsiveness would I have to use a combination of columns and flexbox?? Also @pixelgeek at the end of the video you put up a page with boxes and numbers in them. Is that available to play around with somewhere on webflow? I enjoy trying out the new tools but I don't want to do a design using the nifty tool to find out it doesn't really work with media queries.

thanks
Jeremy

#2

I'm wondering the same thing. So, help would be appreciated. Been playing around with the website builder for a day now. Lots of time went in to figuring out how to create this navigation menu http://capitalpink.webflow.io/

Hover over the butterfly icon & enjoy. ha!

Obviously there isn't much on my website. Still in practice mode.

I'm wondering how to work with a flex box to make it stretch across the screen on multiple devices, not just a large screen.

A response in regards to responsiveness would be wonderful!

#3

Oh, thank you.

I thought i was the only one, that couldnt figure this out (feeling stupid). I would love having a dynamic list, designed in flexbox look good on all devices. So to have full power on all screens combined with the cms part... would be amazing.

Thanks!

#4

Hi @jbleroux, Flexbox allows to create responsive layouts. Those layouts can be changed via styles at the different breakpoints if needed, and flex content can be styled to wrap when the viewport changes.

Even though you may have elements styled with flex styles, you still may need to use other css styles to accomplish a goal.

Take a peek at this page to get an idea how flexbox is used to create different kinds of layouts: https://flexbox.webflow.com/

It is very helpful, that when asking for help on how to make something response, if an example can be provided and a read-only link shared: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

I there a layout example that is similar to what you would like to create?: https://flexbox.webflow.com/#layouts ?

#5

Hi @Fagerlund, when using Dynamic Lists, the behavior of the list items collapsing on mobile devices is being affected by the dynamic list, not flexbox.

At the moment, if you have a row of items in a dynamic list, it is going behave the same way on mobile device, with or without flexbox.

One option on mobile views, is to use a separate dynamic list that is only 1 item across, and hide the visibility of the original dynamic list used on desktop and tablet views.

Using columns in flexbox on the other hand, will work differently, so the wish list on this, is that dynamic lists should have same behavior as regular columns: http://forum.webflow.com/t/cms-dynamic-list-columns-changeable-in-layouts-for-tablet-and-phone/19678

#6

This webflow seminar video from Nelson was great. https://www.youtube.com/watch?v=UIp2dt5G9hc

Now creating a responsive design is easy.

#7

Here is the link to what I am playing with. The responsive design shrinks everything. Which is responsive but will make a ton of content unreadable.

https://preview.webflow.com/preview/jeremy-lerouxs-flexboxy-site?preview=509cde71acd5ae23539bdf50338f373d

Say I want to have 1 and 2 on one line and then 3, 4 5, on the next. I can stack the divs one on top of another very easily. But is what I am wanting to do possible?

I think I'm missing something. Or maybe I'm trying to use flexbox for an entire complex layout that won't allow for the manipulation. I watched nelson's tutorial where we made something pretty much like this and that makes sense. It is adjusting the repsonsive bit I'm not getting. And how adjustable it is and best practice to manipulate it

thanks
Jer

#8

Thanks i will see if this helps me figure out my conundrum. I have created my original site with responsive design with great results

https://preview.webflow.com/preview/jeremy-leroux?preview=9661828dc2b68eac70c79f38c502edc8

but going forward I am trying to wrap my head around flexbox and responsive design. Maybe I am not putting the right pieces together. BUt I am trying to improve my speed of workflow. And confidence with it so i can take on some clients

thanks
Jer

#9

I think i'm getting the hang of this and the easiest way to manipulate the design for responsiveness is wrapping the children and setting the advanced width percentages. Would you consider this a best practice or is there a problem I will be creating that I don't see by just manipulating the boxes?

closed #10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.