The menu for my website uses button links. The button links are in a container. The container has max-width of 1000 px and the left/right margins are set to auto. Display is set to Flex with Row/Wrap/Center/Baseline/Center. The button link Flexbox is set to Auto with Flex Grow = 1 and Flex Shrink = 1.

For whatever reason, I cannot get the button links to wrap. The buttons fit on the screen for a desktop, but they won't on a mobile phone. I want them to stack. I've gone through grid, row, column, container and button link changing settings for the last two hours and cannot get them to stack.

Ideas?

Hi DianaH,

I'm not one of the support guru's around here, but at this point I can recommend that you always state what version of RSD you are using (beta 2.0 or 1.5) when asking questions, or asking for help. There are some differences both in how things work and how to explain fixes. For instance beta 2.0 more or less forces you into the shallow schmuck cell phone users first mode while 1.5 starts at the intellectually superior users desktop first mode (not that I have a strong preference... )

Your question seems to be implying a desktop first mode so.... I'll approach the question from that perspective.

Thing is you need to determine at what viewport size (screen width) the display of button links starts getting crappy - then set a (use or an existing) breakpoint just beyond (to the right of) that point. With the designer focus on the left side of that breakpoint, change the flex container to column instead of row... and that should 'fix things'.

row displays:
x x x

while col displays:
x
x
x

To get wrap working (I may be wrong on this) I am thinking you would need to put each button in its own container because wrap governs container behavior as a whole, not the contents within a single container?

Hope this helps -

Regards,
Gordon

Make sure the buttons are set to display block.

At the point you want the buttons to stack set the container holding the buttons to felx display=column

Hello Gordon/Wayan/Eric,

Good to know there is a major difference between 1.5 and Beta 2.0. I am using Beta 2.0, Build 2087 to design my website. Part of my problem may be I tend to design based on Desktop First Mode. The grid I'm using is Coffeegrinder DDP. I know it doesn't come with it, but I happen to have Responsive Layer Maker Pro, so I pulled it in from there.

The viewpoint size begins to be crappy at 480. I have 9 buttons, so putting them in a column looks horrible. I created the menu with text links and it works great. I created button links with the exact same methodology and they don't work the same. I've looked at each type and class to validate they are the same. However, given the number of options to review, I could have missed something somewhere.

I did check the Display type on the button as Eric recommended and I do have it in display block.

This is the last thing I need to do before publishing my new website. Any additional ideas?

Diana

With the coffeegrinder system you won't be able to use the built-in components, so I think your best bet is to create a collapsible menu in a different programme, like e.g. CC Menu Builder, and then add it to your project at about the viewport that doesn't look good any more.
You actually have to insert a html element and add the new menu just below or above the other one in wide view, and when you have got it all working (displaying both menus), you set the new one to display none in wide view and display block when you want it to be visible. Then you do the exact opposite with the old menu.

Inger,

Sounds like a great way to do it. I'll go that way.

Diana