as you can see on the sceenshot, text and numbers are aligned but the circles are not.
Need Help. Counter is not aligned no matter what i do.
12 replies · opened Mar 27, 2020
Hello,
Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Here is the page with the problem,
https://www.glafkopis.eu/adrcorfu.html
scroll down and you will see the counters. For the moment i have displaced the percentage in order to make it seem in the center of the circle so the error would not be that obvious.
I would like to ask 2 things:
- I need to publish the site as soon as possible, so please lend me a hand here.
- i noticed that on mobile device the counter get mixed with the text below, any way around it ?
Thank you
Hello,
We noticed that you are using LESS. And in the LESS there is a minor bug related to the Rounded Skills Codes. Please find the following code in the less/shortcodes/counter-skills.less File:
.rounded-skill {
display: inline-block;
margin: 0 15px 15px;
+ h5 {
margin-bottom: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
}
and replace it with:
.rounded-skill {
display: inline-block;
margin: 0 15px 15px;
position: relative;
+ h5 {
margin-bottom: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
}
Then add the .center Class to the .col_one_fourth DIV and remove any existing custom codes you have added manually.
This should fix both your issues. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Unfortunately it did not solve the problem.
If you visit the site you will see that i did as you suggested on the first counter and the problem continues.
Hello my last post was marked as solved so i am creating another,
i did as you suggested but yet the problem is there, visiting www.glafkopis.eu/adrcorfu.html you will see that the first counter is as you suggested but nothing. Second i dont think i am using less.
Hello,
When we open the File: https://www.glafkopis.eu/style.css, it says that it is a LESS Stylesheet. Additionally, the default style.css File included does not have this issue and only the LESS Stylesheet had the issue which is why we have provide you with the Solution accordingly.
Nonetheless, you can find the .rounded-skill CSS Block in your CSS Codes in the main style.css File and then simply add the position: relative; CSS Property to it. Furthermore, your HTML Codes should look like this:
	
		%
	
	Το καλούμενο στη διαμεσολάβηση μέρος εμφανίστηκε και συμμετείχε στη διαδικασία
We have tested these codes on the Latest Version of Canvas before providing it to you here and everything works fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
PS. Simply reply to this Support Ticket if you issue remains unresolved without opening a New Support Ticket. This will enable us to Track your issues in much more organized way. Thanks. :)
Hello again i did everything you said. Still the same.
Allow me to become more precise. On my computer it has always looked perfect, while im editing locally there seems to be no problem at all.. But when it goes online the stubborn rounded skills move to the left.
Please provide a solution otherwise i ll have to remove it because it wont work.
Hello,
Thanks for your Continued Patience!
We have already understood your issue and have provided you with the relevant solutions to fix this. However, this is not an issue with the Codes provided with Canvas, you can check the Live Preview here: http://themes.semicolonweb.com/html/canvas/pie-skills.html and also in the pie-skills.html Template in the Package/HTML Folder of your Download. So, this is clearly the issue with the Customized Codes.
Also, none of the codes we have provided have been updated online. Update the codes online and then provide us with a Live URL so that we can check further. Or provide us with your FTP Details so that we can check this and fix this for you. Additionally, it appears that a LESS preprocessor is running on your Servers which is causing this issue and if you update the codes we had provided for the LESS Files, this issue should be resolved.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
First of all it appears that the one you ve sent me also has problem when viewing on a smartphone.
Second, would you be kind enough to give me an email address for the ftp details ? Thank you
Hello,
Wow! That is a seriously bad mistake. :D We Apologies about the Inconveniences about the Mobile Version. We will fix it too in a jiffy. A minor code displacement. Meanwhile, you can send us the details here: semicolonweb@gmail.com .
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
email sent,
would it be possible to resolve it today ?
Hello,
Resolved! :) There was an issue with Browser Cache. Simply Hard Refreshing the page fixed the issue. Make sure you change your FTP Credentials.
Let us know if we can help you with anything else.
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