I am currently working on a prototype desktop application whereby the goal is to have all the information ready and accessible in one place in a neat fashion.
Inside each button as you can see in the screen below you are taken to another screen where you can view additional information about your trip. It is a travel planning tool. (see below)
All is well and good so that depending on the screen size on desktop the size of the buttons will change accordingly. The page is not set to be a fixed width and neither are the icons.
The desktop page width is 1200 while height is 752
You have to use conditionals. When the current page width <= X, then Font Size is Y.
As far as groups go the best solution I came to think of until now is having multiple groups hide/show based on the current page width. Still managed using conditionals.
You have to set a mobile friendly minimum width requirements for each group. For example, you mention your page max-width is set at 1200, and at the bottom you have 2 rows with 3 columns, if you want to keep the same layout for mobile (2 rows x 3 columns) you need to set the min-width to match the smallest mobile device (320ish pixels).
Just eye balling it, it looks like each of the 6 (2x3) groups is about a quarter of the page width, so lets say 320px. To make 3 groups fit in a mobile (320px) screen size, each one of them should be about 100px, so about 1/3 of its current size. So, go in group and set min width to be 33% and play around from there. Below is a screen shot of the setting. Also, I’m not affiliated in any way with them, but buildcamps responsive design guide is worth the $20.
