Width of bar/ container

2 things:

1. percent=top is not a valid attribute for percent. It seems to be doing what you are intending but it really doesn’t know what what you’re trying to do (unless you’ve added CSS to handle it that way — I didn’t look at your stylesheet). The accepted arguments for percent are inside or after. But seeing as how it’s working for you, you may as well just leave it. It’s not going to break anything.

2. The more important thing is your width. width=25% isn’t doing anything as width isn’t an accepted value. There was some discussion (on another thread) about adding a width parameter and allowing the width to be variable which I either dropped the ball on and forgot about or decided it was secondary to the fullwidth parameter that I *did* add (in the same thread) which allows the progress bar to be responsive (e.g. takes up the full width of the container rather than having a hard-coded width of 400px.

SO, to answer your question, your updated shortcodes should look like this:

[wppb progress=80 percent=inside fullwidth=true]

and

[wppb progress=100 percent=top fullwidth=true]

I’m planning on doing an update to the progress bar soon, so if you think the width parameter should be added (where the value can be a percent or a px width and it changes the width of the bar to that size) as opposed to just using the fullwidth parameter, let me know and I can see if I can get it into the next update.

The other option would be to add css to your theme (or via a plugin like Jetpack or My Custom CSS that has a custom CSS editor), that changes the width of the progress bar, e.g.:

div.wppb-progress {
     width: %your_width_here%;
}

Chris, I apologize for being so tardy in responding! To your recommended fix – thank you! Clearly my ignorance is showing. I appreciate your kindness, patience and solutions!

To your second question, it seems like this approach worked a-OK for me, so a width parameter is not necessary, but it is an interesting idea. Perhaps other users might have uses?

Excellent work, sir – THANK YOU!!

No problem. Thanks for the feedback!

Can I suggest that you implement that piece of css:

div.wppb-progress {
     width: %your_width_here%;
}

In the next version as without it the responsive option will only go to a minimum fo 400px wide which is wider than screens of a 320px width.

@irishmark

The width is going to be different for every site and every layout. That’s why I added a fullwidth option several versions ago. For responsive sites, you can use the fullwidth option which will extend to 100% of the containing div, making it responsive when the site changes for different viewports.

https://museumthemes.com/progress-bar/options/fullwidth/