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

How to Make Progress Bars Mobile-Responsive


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;”>
0%
</div>

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 August 10, 2018

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

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.

Opt-In-Laptop.png

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

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