I need make a path responsive, and smaller. I copied this example of the SLDS documentation:
https://www.lightningdesignsystem.com/components/path/#site-main-content
I need to include this component (showing the stages) in another custom component, so I need reduce the size and make it responsive.
Adding the width
style attribute doesn't work. I don't know how reduce the width.
<article>
<div class="slds-grid slds-path__track">
<div class="slds-grid">
<ul
class="slds-path__nav"
role="listbox"
aria-orientation="horizontal"
>
<li
class="slds-path__item slds-is-current slds-is-active"
role="presentation"
>
<a
aria-selected="true"
class="slds-path__link"
href="javascript:void(0);"
id="path-0"
role="option"
tabindex="0"
>
<span class="slds-path__title">Beginner</span>
</a>
</li>
<li
class="slds-path__item slds-is-current slds-is-active"
role="presentation"
>
<a
aria-selected="false"
class="slds-path__link"
href="javascript:void(0);"
id="path-1"
role="option"
tabindex="1"
>
<span class="slds-path__title">Intermediate</span>
</a>
</li>
<li
class="slds-path__item slds-is-current slds-is-active"
role="presentation"
>
<a
aria-selected="false"
class="slds-path__link"
href="javascript:void(0);"
id="path-2"
role="option"
tabindex="2"
>
<span class="slds-path__title">Advance</span>
</a>
</li>
<li
class="slds-path__item slds-is-incomplete tamAnch"
role="presentation"
>
<a
aria-selected="false"
class="slds-path__link"
href="javascript:void(0);"
id="path-5"
role="option"
tabindex="5"
>
<span class="slds-path__title">Expert</span>
</a>
</li>
</ul>
</div>
</div>
</article>
The image is: