You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Moderators of news aggregator subverses (e.g. subreddits on Reddit) are able to create a custom CSS for their community page.
But they can not edit the HTML. Therefore, they are limited to the possibilities that CSS offers.
Some moderators choose a multi-column design for their community (screenshot found here), which can be achieved by reducing the width of one post element and applying display:inline-block. In that example screenshot, two post boxes are seen per row.
I have seen a different community (forgot where exactly) where each post had a box around it. Apparently, it was based on the so-called Naut design.
But there are some limitations:
If no height is specified for each of these post info boxes, the size of the boxes will match the content, which causes the boxes in each row to have a different heights, which does not look so nice.
If a fixed height is specified for each of these boxes, the boxes with lesser content than needed to fill that height will have an empty vertical gap, while the boxes with too much content will have an overflow that could be handled with overflow-y:scroll;.
But a much more elegant solution in the latter case would be having a box expand to its full height on :hover, but that hits two CSS walls (limitations) as well:
One apparently can not transition smoothly from an absolute height (e.g. 150px) to a relative height (i.e. 100%).
Unlike displacement with position:relative and top,bottom,left,right, increasing the height of the boxes with display:inline-block pushes away the boxes in the next row. But using any other solution than display:inline-block would not allow a multi-column design in first place.
There are likely solutions involving HTML, but as already mentioned, moderators of subreddits on Reddit (and similar sites) are bound to the limitations of CSS. Therefore, it would be good if the possibilities of CSS get expanded, even if there is already a HTML-supported workaround.
The text was updated successfully, but these errors were encountered:
Also, it seems that this design would be better served by using https://drafts.csswg.org/css-grid/ and having each post be a grid item rather than by using inline-blocks. In the case of Reddit, this should be doable without changes to the HTML markup, since the posts are direct children of a container element.
Moderators of news aggregator subverses (e.g. subreddits on Reddit) are able to create a custom CSS for their community page.
But they can not edit the HTML. Therefore, they are limited to the possibilities that CSS offers.
Some moderators choose a multi-column design for their community (screenshot found here), which can be achieved by reducing the width of one post element and applying
display:inline-block
. In that example screenshot, two post boxes are seen per row.I have seen a different community (forgot where exactly) where each post had a box around it. Apparently, it was based on the so-called Naut design.
But there are some limitations:
overflow-y:scroll;
.But a much more elegant solution in the latter case would be having a box expand to its full height on :hover, but that hits two CSS walls (limitations) as well:
position:relative
andtop
,bottom
,left
,right
, increasing the height of the boxes withdisplay:inline-block
pushes away the boxes in the next row. But using any other solution thandisplay:inline-block
would not allow a multi-column design in first place.There are likely solutions involving HTML, but as already mentioned, moderators of subreddits on Reddit (and similar sites) are bound to the limitations of CSS. Therefore, it would be good if the possibilities of CSS get expanded, even if there is already a HTML-supported workaround.
The text was updated successfully, but these errors were encountered: