WordPress.org

Ready to get started?Download WordPress

Forums

Progress Bar
Centering Progress Bar (6 posts)

  1. Oinobareion
    Member
    Posted 1 year ago #

    Hi,

    I am trying to center the progress bar on my page like this:

    <center>
    [wppb progress=50 percent=inside]
    </center>

    The Progress Bar is centered now, so it actually works. But the animation also starts from the middle - spreading to the outer border of the bar. Looks kind of funny, but it's not what i have expected :-)

    Is there a way to solve this issue?

    http://wordpress.org/extend/plugins/progress-bar/

  2. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    Try

    <div style="width: 100%; text-align: center;">
    [wppb progress=50 percent inside]
    </div>

    or do [wppb progress=50 percent=inside fullwidth=full] and it will take the full width of the container (content area or wherever you put the progress bar) and it won't matter if it's centered or not.

  3. Oinobareion
    Member
    Posted 1 year ago #

    Thx for your help. This didn't work:

    <div style="width: 100%; text-align: center;">
    [wppb progress=50 percent inside]
    </div>

    It just stays left-aligned. I also thought about setting its width to 100%, but i simply don't like it this way.

  4. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    Okay, then, if you can, try adding this to your CSS:

    .wppb-wrapper {
         margin: 0 auto;
    }

    The thing is, I think we're going to be fighting with your theme's CSS on this one because if you look at my demo page, all of my progress bars are centered and all I did was use the center align button in the visual editor (which adds a <div class="aligncenter"> wrapper to the contents.

    http://museumthemes.com/progress-bar/

  5. Oinobareion
    Member
    Posted 1 year ago #

    Didn't work either...
    But you are definitely right, I am fighting against my theme - it's the "Responsive" theme, which is very confortable but restrictive at the same time. If I find a solution, I'll post it here.

    Thanks anyway.

  6. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    This worked for me (in Chrome) for centering the progress bar in Responsive:

    .wppb-wrapper {
         margin: auto;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic