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-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>
Thanks, Klara
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
