- This topic has 20 replies, 2 voices, and was last updated 6 years, 9 months ago by
.
Is there a custom code I can assign to a class so that sometimes I can set List Items to be center or right-aligned? Thanks!
Hi @LeaV,
I hope you are well today and thank you for your question.
Sure we can develop custom code to achieve this.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamSure! Have attached in private area. Thanks
Solution for this topic
You can centre align them by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Co
li.sh-list-item { clear: both; width: auto; display: table; margin: 0 auto; }You can right align them using following custom CSS code instead of above.
li.sh-list-item { float: right; clear: both; width: auto; }Great! How do I assign these to their own classes?
You can change the class sh-list-item in the above code to whatever you want to set.
Ah, got it! Thanks
Sorry guys I’m not a website pro!
Thanks
You are most welcome here 🙂
Hi,
This code is affecting all list items on my website, not just those to which I’ve assigned the custom class. So it’s affecting all my lists even when classes aren’t assigned.
I’ve tried changing to code to a different class name, but when I apply that class to a specific column, it doesn’t take effect.
How can I fix this?
Thanks
Also, when the original code is in place and list items are centered – many still have 1 or 2 items that are out of alignment, as in links below.
This code is affecting all list items on my website, not just those to which I’ve assigned the custom class. So it’s affecting all my lists even when classes aren’t assigned.
May be that class is getting applied automatically on those lists so could you please tell me by sharing page URL where you want to remove list alignment.
Also, when the original code is in place and list items are centered – many still have 1 or 2 items that are out of alignment, as in links below.
Are you talking about the items on the shared pages as shown in the attached screenshot?
If yes then this is because there is too much content in the list item to fir in one row.
Ok thank you – links added below.
I can see on your shared pages the class sh-list-item is getting applied to list items as shown in the attached screenshot.
If you don’t want to use this class as it is getting applied automatically then just change the class sh-list-item in the provided CSS code.
Hi,
Yes, I’ve already pre-empted this – as explained above if I change the name of the class in the code and the element and apply it, no changes take effect. In the link below, I’ve applied the code with the new class name and called the class “test”. You can see it’s now not working at all.
Solution for this topic
You have to change the above shared CSS code with the following custom CSS codes respectively.
.test li.sh-list-item { clear: both; width: auto; display: table; margin: 0 auto; }.test li.sh-list-item { float: right; clear: both; width: auto; }Thanks – that’s great for when I want to right-align but I want it centre aligned and this code is not taking effect even when I add “test” as the class:
.test li.sh-list-item {
clear: both;
width: auto;
display: table;
margin: 0 auto;
}I can see you are using shared CSS code wrong on your site as shown in the attached screenshot.
You should add . before test class as .test
Aah, perfect – thank you!
