Greetings all
I've created a list of buttons with dropdowns using custom html in a text card, but alignment seems to be a problem when viewing on different screen sizes. Also, I'd prefer that they be centered. Am I missing something in the code that'd eliminate the problem? I'm using Hub Basic.
Hi @KevinKhosa,
You don't have much CSS specified and it looks like you may be using Bootstrap classes. This is Hub's underlying framework, but you'd probably need to put these buttons into a .navbar to have different sized devices handled automatically.
You might find one of these two samples helpful as a starting point for center-aligning navbar links:
https://www.codeply.com/go/1lrdvNH9GI/bootstrap-3-center-navbar-brand-and-links
https://codepen.io/davidcochran/pen/LYPrPr
I'd definitely start by wrapping all your buttons in a uniquely-named container. This will help you if you need to write any custom media-queries around placement and sizing. I can give you a Bootstrap class that will help you center your row of dropdown buttons, but it won't automatically handle how this looks on different devices. You may need to research media-queries for that if you don't use the .navbar classes. But to just center the buttons, you can put .text-center on the container wrapping around the buttons.
<div class="my-row-of-buttons text-center">
[all button code goes here]
</div>
Thanks, Klara