Title: Progress bar styling
Last modified: September 9, 2020

---

# Progress bar styling

 *  Resolved [qwik3r](https://wordpress.org/support/users/qwik3r/)
 * (@qwik3r)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/)
 * Any ideas why my progress bar isn’t really showing full width? Something about
   this doesn’t seem right lol. [https://share.getcloudapp.com/RBuObYD6](https://share.getcloudapp.com/RBuObYD6)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Escape Creative](https://wordpress.org/support/users/escapecreative/)
 * (@escapecreative)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/#post-13383451)
 * I agree it doesn’t look right, but that’s how LearnDash built it. They designed
   everything to be on one line, so the width of the progress bar is determined 
   by 1) the size of the container surrounding it, and 2) the size of the text within
   it.
 * Our plugin does make the font size a little larger on many themes, so the issue
   is sometimes more noticeable with our plugin activated, but the issue is there
   with or without our plugin.
 * One option is to hide the “Last activity…” text, which will give the progress
   bar more room.
 *     ```
       .ld-course-status-enrolled .ld-progress-stats .ld-progress-steps {
           display: none;
       }
       ```
   
 * You could also hide the “In Progress” label if you don’t mind not showing it.
 * Aside from that, there are other CSS tweaks you could make, but they get more
   complex. You could play with different flexbox properties to move things around,
   or onto a 2nd line, but there are also screen widths to consider, so media queries
   would come into play. It gets tricky.
 *  Thread Starter [qwik3r](https://wordpress.org/support/users/qwik3r/)
 * (@qwik3r)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/#post-13384615)
 * Thanks!
 * I’m trying to mess with it a bit and break it on to it’s own line but not having
   much luck. Playing with flex-basis gets it to grow a bit more but then of course
   reduces the 2 other columns size.
 *  Plugin Author [Escape Creative](https://wordpress.org/support/users/escapecreative/)
 * (@escapecreative)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/#post-13384721)
 * Try using `flex-wrap: wrap;` on the parent element that contains everything. 
   Then you can set the widths of the child elements, which, once over 100%, should
   bump things to a new line.
 *  Thread Starter [qwik3r](https://wordpress.org/support/users/qwik3r/)
 * (@qwik3r)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/#post-13389985)
 * I tried that, but it doesn’t do anything. ;(

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Progress bar styling’ is closed to new replies.

 * ![](https://ps.w.org/design-upgrade-learndash/assets/icon-256x256.png?rev=2412998)
 * [Design Upgrade for LearnDash](https://wordpress.org/plugins/design-upgrade-learndash/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/design-upgrade-learndash/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/design-upgrade-learndash/)
 * [Active Topics](https://wordpress.org/support/plugin/design-upgrade-learndash/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/design-upgrade-learndash/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/design-upgrade-learndash/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [qwik3r](https://wordpress.org/support/users/qwik3r/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/progress-bar-styling/#post-13389985)
 * Status: resolved