Apending class to box container

  • You cannot modify the CSS classes of the outer container, what are you trying to accomplish?


    I am trying to add the class "row" to the container so that the two boxes will fit side-by-side and resize properly by adding the css class col-xs-12 col-md-6 to both boxes. It works perfectly in my developer box when doing this, but I need to add the "row" class to the container.


    [Blocked Image: https://www.artofwargaming.net/screenshots/blocks.jpg]

  • What I did, as a temporary solution, is added the ".row" class to the container class in the custom CSS in my theme. It works and produces the results I'm after, but I still wish there was a way to append a CSS class to the box container. Ideally, we should be able to add an ID to the outer container as well, since my solution will affect all box outer containers on the specific page I'm targeting. In my case, I targeted the specific page with CSS so it won't affect any box containers on other pages.


    So my final code in my custom css was this:


    Code
    [data-page-id="63"] .boxContainer{
    display: flex;
    margin-right: -10px;
    margin-left: -10px;
    flex-wrap: wrap;
    }
  • The issue is that these placeholders aren't designed for multi-column content and as such the boxes displayed at this position expect the full width. The screenshot above pretty much proves that two boxes side-by-side look quite odd, especially with the thread subjects starting to form up skyscrapers.


    Currently there are only the header and footer boxes that do allow multiple boxes side-by-side and are actually designed to hold them. Furthermore boxes can return different HTML markup depending on the selected position, aiming to provide the best possible appearance per location. It's always a bit of a struggle between flexibility and usability.


    As of now, there is little I can offer to you out of the box, but we'll evaluate possible approaches to improve this in future releases.

    Alexander Ebert
    Senior Developer WoltLab® GmbH