Canvas Support

Process Steps - responsive problems.

3 replies · opened Feb 20, 2017

DdaihloFeb 20, 2017

Hey, have just renewed support for another six months.
After being in the industry for over 20 years, I am really impressed with the level of support, it is well worth the money.

http://themes.semicolonweb.com/html/canvas/process-steps.php
I love the process steps layout on full size screens, but when these section is viewed on smaller screens, the numbers stack up one on top of the other and it becomes a very poor navigation experience. I understand that this is typical bootstrap responsive stacking behaviour, but it is unsuitable in this specific case.

What about making the four steps shrink responsively rather than stack on top of each other? The steps could stay side by side above the tabbed content, but still be navigated well on mobile size screens.

Is this something you can help me to achieve?

DdaihloFeb 23, 2017

I think this ticket slipped through the cracks :)

SSemicolon WebSTAFFFeb 28, 2017

Hello,

We Really Apologize about the Delays in replying to your Support Query!

Please find and delete the following code in the css/responsive.css File: 

.process-steps li {
	float: none;
	width: auto !important;
	margin-top: 20px;
}

Additionally, since it might look a little bit crammed on Mobile Devices you can also consider setting the Visibility of the h5 Tags in the Process Steps to hidden using the Bootstrap Responsive Utility Classes.

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.

DdaihloFeb 28, 2017

This is perfect!
Just what I had in mind :)
Thanks.

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