1. Home
  2. AccessAlly
  3. Progress Tracking & Checklists in AccessAlly
  4. How to Make Progress Bars Mobile-Responsive in AccessAlly

How to Make Progress Bars Mobile-Responsive in AccessAlly

Are you having issues with the mobile-friendliness of your progress bars? All you need to do is add simple line of code to make your progress bars resize correctly.

How to Make Your Progress Bars Mobile-Responsive

Here is the code you can use as a starting point:

<div style=”width:600px;”>

Step 1: Add Code to Page

First, add the code listed above to your WordPress page (text view), wherever you want your progress bar to appear.

Step 2: Customize Code

There are two portions of the code that you will need to customize, based on your own site setup:

In the beginning portion of the code, you’ll notice there is a width:600px specified. Please change the 600px to whatever width you need for the progress bar to fit on your page.

(Since the width inside the shortcode itself is set to 100%, it will resize properly when the parent “div” resizes.)

The other portion to change is the height=”30″. You can change the number 30 to fit the height you want for your progress bar.

Updated on November 16, 2023
Was this article helpful?

Related Articles


If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Laptop with the AccessAlly demo site

AccessAlly is the most flexible way to sell and elegantly deliver digital offerings. All in one place.


You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.