Canvas Support

process-steps.html | Click directly on the steps and improve the mobile view

1 reply · opened Sep 19, 2022

PPavelRomeroSep 19, 2022

Hello:

I am using Shortcodes/process-steps.html.

In the example I can advance between the steps by pressing buttons (previous / next).

  1. How can I press a number and go to that step directly?

  2. In the Mobile view, the step numbers are displayed vertically, if there are many steps it becomes unnavigable. How could I do to display them horizontally and a maximum of 3 numbers per line? If there are 5 steps, for example, 3 would be shown on the first line and 2 on the next (all centered). If there are 6 steps for example, 3 would be displayed per line.

Regards
Pavel.

SSemicolon WebSTAFFSep 22, 2022

Hello,

  1. The process-steps.html File has the following CSS Code:
.process-steps li { pointer-events: none; }

Simply removing the code will make the Numbers clickable.

  1. The Process Steps use Bootstrap Grid. So you can arrange the Columns on Mobile Devices according to your needs. So simply change .col-sm-6 to .col-4. And add the .justify-content-center Class to the .process-steps Element. Example:
<ul class="process-steps row justify-content-center col-mb-30">
	<li class="col-4 col-lg-1-5">
		<a href="#ptab1">1</a>
		<h5>Review Cart</h5>
	</li>
	<li class="col-4 col-lg-1-5">
		<a href="#ptab2">2</a>
		<h5>Enter Shipping Info</h5>
	</li>
	<li class="col-4 col-lg-1-5">
		<a href="#ptab3">3</a>
		<h5>Complete Payment</h5>
	</li>
	<li class="col-4 col-lg-1-5">
		<a href="#ptab4">4</a>
		<h5>Order Complete</h5>
	</li>
</ul>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard