How can you modify the alignment width and ensure responsiveness in Foundation 6?

I’m experiencing strange results when attempting to add a button stack to an existing website. Although I have successfully centered everything in desktop mode, it becomes disorganized in mobile or tablet size. Do you have any suggestions on how to properly set this up? I’m currently using the swatch pack.

As you know lots of things can effect responsiveness and buttons. I suggest you post on weavers space community with screenshots of your button and stack setup.

1 Like

I love visiting Weaver Space to test my skills with Joe Stacks’ complex scenarios. If you have any simple tricks for button alignment, I’d really appreciate the advice. Thank you for your help. I’m looking to expedite the solution by leveraging elements from another project. Have an amazing day!

Well hard to say without knowing details. If it were me I would make sure theme is set and start looking at the hierarchy of the layout from top down. First, relevant containers and columns or grids etc and their alignment and responsive settings. Then button setup like type of button, sizing, expansion, alignment and device settings. Also, what swatches / classes are used and where. Also, sometimes nearby image settings can throw things. Could even be incompatibility of stacks, which means removing things until it works.

2 Likes

Thanks. I will try those suggestions.