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:

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 votes

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
  4. At the bottom of your page, add an html macro for your css and add the following:
    <style type="text/css">
    -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
Community showcase
Posted Feb 06, 2019 in Confluence

Try out the new editing experience

Hi team, I’m Avinoam, a product manager on Confluence Cloud, and today I’m really excited to let the Community know that all customers can now try out the new editing experience and see some of the ...

782 views 33 5
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