How do I create a column layout that responds to width?

[Liz Canham]

Hi everyone. Please can someone help me?

I'd like my layout to have 3 columns for wider pages, that shrink and converts to 1 column when it reaches a specific width. An example is demonstrated in the 'Build a better team' section here: https://developer.atlassian.com/?_ga=2.213467092.1913756130.1502358394-2089651600.1499935469.

I've tried this by inserting HTML and CSS macros to the page and creating divs so that I can apply specific styles. I've also tried using the viewport tag. I'm relatively new to HTML and CSS so I think I might have to specify somewhere that I want to change to 1 column when the width reduces to a specfic value. How do I specify this using viewport in a format that Confluence recognises? I understand that Confluence uses CSS2 so I can't use media queries, is this correct?

I'm using the server version of Confluence, and already have a theme applied to our spaces to give us some custom functionality, so we cannot apply the Scroll Viewport plugin that otherwise I believe may help us.

Thank you everyone. 

[StephR]

You should be able to do this with CSS and HTML macros only.  But this will depend slightly on the type of content you are displaying.

The best and simplest way to tackle this is to do the following:

1. Put an html macro in your page with html like 

   <div class="columntest">

2. Put your content after this macro
3. Add another html macro with html like

   </div>

4. At the bottom of your page, add an html macro for your css and add the following:

   <style type="text/css">
   .columntest{
   -webkit-columns: 3 200px;
   -moz-columns: 3 200px;
   columns: 3 200px;
   }
   </style>

The way this works is that the 3 in the example above defines how many columns you desire.  The 200px indicates the minimum width for the column before it reduces the column number.  When there is no longer room to have columns at 200px each, it will reduce to one column.

You can also use columns to set the width between columns and various other attributes.

Once you save your changes, you should be able to resize your browser window and see the columns adjusting in real time.

I have attached a screenshot of the above in my editor.

Please let me know if you have any further questions and if you need help with your specific usecase, please post more information on excatly the types of content you are adding in columns, your desired state, and the code you have tried.

[Liz Canham]

Thank you for your reply Stephanie. I'm working on something else at the moment, but will get back around to testing your suggestion soon. I think the columns bit at the end is what I'm missing.