User blog:CzechOut/Using CSS to Enhance Your Portable Infoboxes

Ensuring that your content and our product is compatible with any kind of device has become an important part of development here at Fandom powered by Wikia. Everything we build has device compatibility in mind. One of the most important tools we've developed is the portable infobox -- part of a larger effort to ensure that all of your wiki's infobox content displays well on anything from a phone to a refrigerator.

We often get asked how much portable infoboxes can be customised. Lots of communities want extra functionality in their infoboxes, but many of those don't exist in the default infobox style. Even those of you who are more comfortable in the stylistic manipulation of portable infoboxes might have more questions about things like collapsible sections, data labels, and line-breaks.

Portability Hub is a great resource for finding the answers to these questions, and learning more about the types of customizations you can make to portable infoboxes. Here are some common customization questions -- and links to their answers!


 * I've made a collapsible section on my infobox. How do I change the default arrows to say [more] or [less]? You can find the answer to that right here.
 * How do I use flex centering on my infobox? This page has got you covered!
 * How do I style horizontal groups? Find out here.
 * How do I use captions and headers? Great question—your answer is here.
 * How do I style bulleted lists? This is a big one for a lot of communities, so make sure you check it out.
 * Can I get rid of hyphens that break up words? Sure can! Here's how.

There's a lot of info to digest in those pages, but they can be very helpful for communities who are looking to use more complex styling in their infoboxes. The beauty of CSS is that there's no single right answer to any change. There are definitely solutions we can provide, and Vanguard is always here to assist, so don't hesitate to use those pages or ask us for help.

Do you have a better -- or just different -- idea of how to solve some of these CSS questions? Don’t be shy: share your CSS talent in the comments section below!