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

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. 

1 answer

0 vote

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.

Screen Shot 2017-08-16 at 10.18.08 am.png

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.

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.

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Friday in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

309 views 11 10
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you