How do I move a tag cloud to the top and center of a page?

  • Author
    Posts
  • #1939212

    Hi there,

    I am trying to re-format a category archive page so that the tag cloud, which is currently on the sidebar on the right, is at the top and center of the page. The specific page I need help with is here:

    http://equiphealthcare.ca/category/publications-relevant-to-equip/

    Thanks in advance for your help!

    The blog I need help with is equiphealthcare.ca.

    #1939351

    Hi there, although the widget can be moved to the top of the content area, there are some issues you should be aware of. We have to use position: absolute to do that and when we do, the widget loses all relationship to the other elements of the web page and effectively floats above everything else. If the tag cloud grows and/or changes you may need to go in and adjust the top margin on #primary.

    The second issue is that as the browser window is narrowed, or if someone views it on a smaller device (tablet or phone) the tag cloud content could overlap the posts making both unreadable. You can see that if you paste in the following CSS and then narrow down your browser window.

    #main {
        position: relative;
    }
    #wp_tag_cloud-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 75%;
    }
    #primary {
        margin-top: 330px;
    }

    We can add some media queries to account for the growth in length of the tag cloud for narrower screens, but again, as things change, these would likely need to be adjusted. After trying the above to see what happens, replace it with the following. I’ve limited this change to 768px and wider screens/devices since that is where the design of this theme shifts and I can no longer override things via CSS. I’ll keep looking for a way to do that, but it appears the location of #primary shifts to the HTML at that point and I can’t override HTML level setting with CSS.

    @media screen and (min-width: 768px) {
        #main {
            position: relative;
    }
        #wp_tag_cloud-8 {
            position: absolute;
            top: 0;
            left: 0;
            width: 75%;
    }
        #primary {
            margin-top: 330px;
        }
    }
    
    @media screen and (max-width: 1200px) {
        #primary {
            margin-top: 360px;
        }
    }
    
    @media screen and (max-width: 950px) {
        #primary {
            margin-top: 400px;
        }
    }
    
    @media screen and (max-width: 865px) {
        #primary {
            margin-top: 450px;
        }
    }
    
    @media screen and (max-width: 760px) {
        #primary {
            margin-top: 1600px !important;
        }
    }

The topic ‘How do I move a tag cloud to the top and center of a page?’ is closed to new replies.