Cannot get rows to align without breaking responsiveness

[dsheets74]

Hi, I cannot get the following to work.

I have made a template for a landing page.  I need the download buttons to align properly.  Since the text is different length though the only way I can do this seems to be having 2 different flex columns.

The problem is when I do this they are no longer grouped and does not display properly on mobile.

If I group them - then the buttons are no longer in alignment - but the mobile display works.

Any help is appreciated.

[Jsum · Accepted solution]

@dsheets74,

You have a couple of options here:

1. Use a custom module. Sometimes it's just easier to create your markup in a custom module.

2. Since you have already gotten this far you could just bring it home here. The first thing you should do is add your download buttons into the richtext module containing the text below the images.

If you go with number 2 then there are 2 ways to make the button sit in the exact center of the div it is in. Before you do either one you should probably give the actual <a> tag for the button a specific id/class like ".dowload_button". This will give you something specific to target with the following css.

The first method is to set the button to display block, margins left and right auto, and give it a specific width (or 100% width if you are fine with it being the full width). Block elements behave like divs do (because divs are block elements) so they will take up 100% width of the space they are in and they take their own line. setting left and right margins to auto centers block elements.

The second would be to use display inline block. margins don't really work on inline and inline-block elements. You treat inline elements like text, so you need to apply text align center to the wrapper containing it. This could be richtext module or a div around the button inside the richtext module. You will have to set a width and give the actual button text-align center or just give the button a left and right padding because inline elements stay the width of their content and try to behave like text. 

Either one of these should get the button working like you want it to while keeping it in the right place in your document.

[mkarsten]

I'm having the same issue. Could you give an example of code for the custom module. If I'm understand correctly, the second option sounds more like centering from left to right. We're looking for all the buttons to be at the same position from top to bottom even when the text above them are different lengths. That's easy enough to do, like the screenshot in the original post shows, until responsiveness reorders the blocks and the buttons are one after another instead of being grouped with the text.