search

satRdays / hugo-satrdays-theme

theme for satRdays conference websites
Apache License 2.0
8 stars 7 forks source link

Odd numbers of icons and varying text lengths lead to irregular alignment of the second row of icons #20

Open DaveParr opened 4 years ago

DaveParr commented 4 years ago

Describe the bug When there are 5 icons with differing text lengths, drawing position for the second row is not garunteed to be aligned on desktop screens

https://github.com/satRdays/Columbus2020/commit/987d77c2362a1433bf907cae9d67b515f4fe15b8#diff-618063036395fe9ee107f22b46c9eadeL100-L106 In the highlighted section of this commit, the description of the icons is lengthed significantly as well as deleting one icon leads to the '4th' icon on larger displays wrapping to fit 'under' the '3rd', while the '5th' will be staggered downward and drawn to the left.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots image

Current work around Keep the icon number at six, and the description text lengths roughly consistent

jdblischak commented 3 years ago

From my research last year, I learned this was a known limitation of bootstrap. This SO post describes multiple potential CSS-based workarounds to accommodate the situation where the number of lines of text differs between the items.

The most immediate fix is to simply ensure all your items have the same number of lines of text. This has been my general experience with bootstrap. All of their example website templates look beautiful, but the fact that all the images and example text are the exact same size isn't just because it's a demo; it's because it's a requirement. If you want your website to have the same layout, you have to pre-edit all your images to have the exact same dimensions and ensure the text in each column has the same number of lines.