Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage
Highlighted

Confluence for Mobile Devices Without "Confluence Mobile" Edited

I have found that Confluence Mobile is incredibly limiting and doesn't even allow the viewing of macros from it. So i have worked on making our site mobile friendly using a few items. I would like any input that users have or anything that i may have overlooked.

Also check out the WCAG Compliance ticket to find my other post which you can use JavaScript and CSS to meet WCAG AA (and 508).

This is intended to convert Confluence to a Responsive Design rather than requiring the use of the Confluence Mobile

Meta Tag

All the page width content to be updated for mobile devices

Add to Custom HTML Head

<meta name="viewport" content="width=device-width">

Media Queries

Add to Global Stylesheet

/* Breakpoints */
@media (max-width:935px) {
    /* Fix Search Results Page */
    #search-results-header #query-string {
        width: 85%;
    }
    #search-results-header {
        padding: 10px 10px 0px 22px;
    }

    #space-list .labels-heading, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
        display: none;
    }
}
@media (max-width:760px) {
    /* Allow the column Macro to stack on resize */
    .columnMacro.conf-macro.output-block {
        float: left;
        clear: both;
        width: 100% !important;
        min-width: unset !important;
        max-width: 95% !important;
    }
    form input#quick-search-query {
        width: 15px;
        background: unset;
    }
    input#quick-search-query:focus {
        width: 150px;
    }
    .aui-header .aui-quicksearch:after {
        font-size: 20px;
        height: 24px;
        margin-top: 7px;
        width: 24px;
    }
    .aui-dd-parent.quick-nav-drop-down {
        top: 40px;
        right: -163px;
    }
    .search-results-page-panel-nav {
        width: 150px;
    }
    /* Sidebar Adjustments */
    .collapsed .space-tools-section {
        height: 40px;
    }
    .aui-sidebar-footer {
        height: 0px;
        min-height: unset;
        padding: unset;
    }
    a.expand-collapse-trigger, a.aui-sidebar-toggle, .aui-sidebar-handle, div.aui-sidebar-footer {
        display: none;
    }
    .collapsed .acs-side-bar {
        bottom: 40px;
    }

    #footer:not(#footer.login-page) {
        margin-left: 55px !important;
    }
    #footer.login-page {
        margin-left: unset !important;
    }
    #space-search {
        width: 180px;
    }
    #space-directory {
        min-width: 30px;
        width: 10%;
    }
    #space-list .desc-heading, #space-list .labels-heading, #space-list .space-list-item .space-desc, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
    display: none;
        }
    #space-list .space-name {
        min-width: unset;
        word-wrap: break-word;
    }
}

@media (max-width:600px) {
    #space-search {
        margin-top: 40px;
    width: 250px;
    }
    #space-directory {
        min-width: 30px;
        width: 10%;
    }
    #space-list .desc-heading, #space-list .labels-heading, #space-list .space-list-item .entity-logo, #space-list .space-list-item .space-desc, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
        display: none;
    }
    table#space-list {
        margin-top: 50px;
    }
    #space-list .space-name {
        min-width: unset;
    word-wrap: break-word;
    }
}
/* Logo Breakpoint Remove Text Before Site Icon */
@media (max-width: 600px) {
    #logo span {
        display: none;
    }
}

Style Modifications

Some adjustments are required to give a minimum page width and make img tags be responsive.

Add to Global Style Sheet

/* Mobile Responsive Design */
body:not(.login) {
    min-width: 460px;
}
h1#title-text {
    word-break: break-word;
}
.wiki-content .innerCell {
    overflow-x: unset;
}
img:not(.cp-img) {
    max-width: 100% !important;
    height: auto !important;
}
.cp-image-container {
    width: 100% !important;
}
@media screen and (min-width: 1600px) {
    table.attachments th.comment, table.attachments th.labels {
        width: unset !important;
    }
}

JQuery

Make the sidebar start collapsed so that the sidebar doesn't break the webpage.

Add to Custom HTML Head in a script tag.


$(document).ready(function(){
    <!-- Fix Sidebar Expand -->
    $('.expand-collapse-trigger').prop('tabindex','0');
    $(function(){
        $('.expand-collapse-trigger').keypress(function (e) {
            if (e.keyCode == 13) {
                $('.expand-collapse-trigger').click();
            }
        });
    });
    $("div.confluence-dashboard #nav-sidebar").focusin(function(){
        if ($('div.confluence-dashboard #nav-sidebar').attr('aria-expanded') === "false") {
            $('.aui-sidebar-footer-tipsy').click();
        }
    });
    $("div.ia-fixed-sidebar.collapsed .space-logo a").focusin(function(){
        $('.expand-collapse-trigger').click();
    });
});

Disable Sidebar Drag and Expand Button

JQuery to permanently disable it

@media (max-width:760px) {
    /* Sidebar Adjustments */
    .collapsed .space-tools-section {
        height: 40px;
    }
    .aui-sidebar-footer {
        height: 0px;
        min-height: unset;
        padding: unset;
    }
    a.expand-collapse-trigger, a.aui-sidebar-toggle, .aui-sidebar-handle, div.aui-sidebar-footer {
        display: none;
    }
    .collapsed .acs-side-bar {
        bottom: 40px;
    }
}

2 comments

Sorry for this post, it was a mistake. I'm looking for professional public webpages based on confluence because we are considering to publish part of our internal confluence content to the Internet (this has nothing to do with this article here) :-)

Quick question - is there an updated version for the newer Confluence pages? 

Seems that many of the macros are not responsive at all (code macro, table macro, even regular text paragraphs). 

Sorry, I have moved on from my position managing these I will pass the message long to my old teammates to see if they have updated any of the code base.

Otherwise our current installation seems to be working with the code I originally created. 6.13.7

@Kloe_FerrimanWe can look into this. We typically stay in the Enterprise Release as we do not upgrade every version. But we need to review version 7 as I'm sure there is a number of changes that need to be addressed.

Are you looking for a version?

Brian

Comment

Log in or Sign up to comment
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

494 views 24 9
Join discussion

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you