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.
Thanks, Klara
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-linkshttps://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>
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
