Evenly distributing Webhelp Responsive tiles

[doctissimus]

Hi,

My documentation set has four tiles on the main page. Right now the way they render in the output displays three of the tiles on one row and the fourth on a row beneath. I'd like to even up their distribution.

Is it possible to configure tiles so there are two on each of two rows? Some kind of transformation parameter or custom CSS hack? Thanks for any insight.

[doctissimus]

While I'm hoping that there's a setting or transformation parameter that can help with this, I did manage to get what I want using a CSS hack.

Someone please correct me if I did this wrong, but I decreased the width value for both the #content id and .wh_tiles class, as follows:

Code: Select all

#content, .wh_tiles {
    width: xx%
}

[InspectorSpacetime]

Hi Doctissimus,

The WebHelp tiles utilize the CSS Flexbox layout, which is a layout technique meant for responsive websites. This basically means that when the screen size changes, the Flex-items realign themselves automatically to fit nicely for the different space that's available.

Now, if you set the width for the #content and .wh_tiles to always be 75%, for example, that's going to apply to smaller screens as well, and is probably going to lead to some undesired results for mobile screens.

A better solution might be to set a max-width property and to use pixels. That way, once the screen size gets smaller than the defined pixel limit, the items can then utilize all the space there is, and the flex model can work as expected.

[doctissimus]

Thanks very much, InspectorSpacetime. I'll try your suggestion, which seems like it will help preserve the responsive aspect of the output.