responsive tracker cuts off words on smaller screens

Trying to create a 5-stage tracker, The IPad is the smallest screen this has to work on.
To create the chevrons, I used a rectangle and a diamond.  But the diamond covers the text on the rectangle when in iPad size.
I used z-index to give each step its own layer trying to pull the rectangles above the diamonds.
Here is the fiddle:

If you know of a better way to create this tracker, please share.  this is like the 30th version.  :(

Image of my tracker
Jim SchwetzWeb SpecialistAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eoin OSullivanConsultantCommented:
Jim
There are a few ways to do this
1. With images .. create a PNG with each step in the chevron coloured e.g.  In the one image create a version with 1 stage coloured, then 2m then 3 etc.  This is called an image sprite and is commonly used for icons in HTML/CSS
You then use CSS to set the area of the sprite which is visible to correspond to the step you want
There is a very detailed working example here and all code provided
https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html

2. You can do it completely in CSS & HTML
<ol class="steps">
    <li class="step1 current"><span>Step1</span></li>
    <li class="step2"><span>Step2</span></li>
    <li class="step2"><span>Step3</span></li>
    <li class="step2"><span>Step4</span></li>
    <li class="step2"><span>Step5</span></li>
</ol>
ol.steps {
    $line_height: 20px;
    $padding: 9px;
    $arrow_size: ($line_height + 2 * $padding)/2;
    $max_li: 10;
    
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
    font-size: 13px;
    line-height: $line_height;
    font-weight: bold;
    counter-reset: li;
    
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0;
        text-align: center;
        color: #3a3a3a;
        background: #dae4eb;
        position: relative;
        margin-left: 5px + 2 * $arrow_size;
        
        // Appended arrow.
        &:after {
            position: absolute;
            top: 50%;
            left: 100%;
            content: " ";
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid transparent;
            border-left-color: #dae4eb;
            border-width: $arrow_size;
            margin-top: -$arrow_size;
        }

        span {
            display: block;
            padding: $padding ($padding + $arrow_size) $padding $padding;

            // Prepended arrow inset.
            &:after {
                position: absolute;
                top: 50%;
                right: 100%;
                content: " ";
                height: 0;
                width: 0;
                pointer-events: none;
                border: solid #dae4eb;
                border-left-color: transparent;
                border-width: $arrow_size;
                margin-top: -$arrow_size;
            }
        }
    }

    & > li {
        float: left;
    }
    
    li.current {
        color: #fff;
        background: lightgreen;

        // Appended arrow.
        &:after {
          border-left-color: lightgreen;
        }
                
        span {
            // Prepended arrow.
            &:after {
                border-color: lightgreen;
                border-left-color: transparent;
            }
        }
    }

    // For the overlapping to work, later LIs must have a lower z-index.
    @for $i from 1 through $max_li {
        li.step#{$i} {
            z-index: $max_li - $i;
        }
    }
}

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jim SchwetzWeb SpecialistAuthor Commented:
Thank you!  This was done way better than what I was trying to do.  Time to adjust some of my code.  Thanks Eoin.
0
Eoin OSullivanConsultantCommented:
No bother ...
As the saying goes "Where there's a will ........ there's  ... a dead person" ;-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iPad

From novice to tech pro — start learning today.