Help! Responsive social actions

This is driving me crazy. See below. The blue boxes are spacers set to min width 0. I want to left-align, center, and right-align each of the 3 elements (Watching, Disliked, Comment). I want to use as large a font as possible. How do I set up the max and min widths of the 3 elements to do that while maintaining the left/middle/right alignment?

Responsiveness starts from the “ultra” parent group and on down to the furthermost nested element. As a general guide all elements inside the parent should be fluid (not set to fixed width unless necessary) and you have to watch for the side margins. Setting those blue spacers is fine as you are practically eliminating the side margins of all of the red and blue groups.

I am not sure how the overall behaviour you want should work. So, I am going to assume that the blues and red groups should be one horizontal line. If so, then ensure to nest them all under one group. And from then on experiment with the responsive settings of that group and its parents. Again… one good way is to set everything to be fluid first, and experiment with max min fixed etc … starting with the “ultra” parent first.

1 Like

Thanks. I figured it out. I had to center the social actions to ensure the right-edge action is always in the same place. See below.

1 Like