Progress bar styling

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.

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.

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.

I tried that, but it doesn’t do anything. ;(