Using Flexbox on Mobile

Hello!

I am working through adding the Flexbox feature to some of my content on my site and I was happy with the results until i viewed it on the mobile preview.


Uploading…

Does anyone know how to fix this so that the columns stack?

https://preview.webflow.com/preview/if-i-made?preview=b927bcc3f73e949d966e11fe212a588a

I am talking about the testimonial section on my homepage. You will see my Flexbox layout with my original one underneath.

Thanks!


Here is my public share link: LINK
(how to access public share link)

Yes, start with Direction:columns

@vincent Ah! Simple fix! Thank you. Knew I had to be missing something!

Last question, I want to add margin around the columns for the testimonials but it won’t let me. Any thoughts?

Yes, do this on the child elements, apply them margin or padding.

Also Margin on the parent would not work because it means margin outside of the viewport. You can add padding to the parent and it works the same:

This is what I mean by adding margin.

I watched this tutorial yesterday and they were able to add margin but for some reason the option is greyed out for me.

Sorry, I’m a bit tired and didn’t notice you’re ussing a ROW woidget with Flexbox. I’d say it’s one or the other.
So redo your structure with a div containing three other divs. Give the same class, the row class to the parent, the columns classes to the children.

And look how I play with it:

https://v.usetapes.com/VU15MUYOEs

This may you can do whatever you want without the limitations induced by the row widget.

You’re puzzling me though, I never thought we would be able to stack up sub elements of the row widget using flexbox…

@vincent amazing! Thank you so much. Still trying to navigate through learning Flexbox. I really appreciate your help.

I have one last question that is unrelated but throwing me for a loop.

I updated the navigation to be centered with the logo in the middle and links on either side:

When I try to place the nav on other pages (unfortunately this was not set up as a symbol in the beginning) it moves the logo to the left side. Any ideas?

This screen shot is from my about page.

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