Streaming live at 10am (PST)

Using Flexbox on Mobile


#1

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)


#2

Yes, start with Direction:columns


#3

@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?


#4

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


#5

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:


#6

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.

https://help.webflow.com/video-tutorial/how-to-align-elements-to-be-equal-height-using-flexbox


#7

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...


#8

@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.


#9

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