Hello 🙂 is there any way to make the smart list numbers more like the ones on this website and perhaps even a similar box that they to wrap around part of the text or make the list items searated moreso in some way similar to this?
https://www.mykidneedsthat.com/best-remote-control-cars-for-kids-and-toddlers/
Also is it possible to play the list items numbers in the centre?
many thanks
Hi,
You can inspect the list you mention with the browser inspector and see how it is made
– https://www.screencast.com/t/Q7FWdW5nrQ
– https://www.screencast.com/t/BwasffptT
Then adapt the style to the theme smart list elements, something like this for smart list style 2 for example
– https://www.screencast.com/t/b6iVdsbpxc
This is a tutorial about using the browser inspect to identify elements on pages and the styles used, to create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Also this is the code I used in the example if it should be helpful to you
.td-sml-current-item-nr {
position: absolute;
top: -45px;
left: -42px;
width: 90px;
height: 90px;
line-height: 85px;
border-radius: 50%;
border: solid .3em #2D9EDD;
box-shadow: 0 2px 10px rgba(30,30,30,.2);
background-color: #fff;
text-align: center;
color:rgb(45, 158, 221);
}
.td-item {
border: 1px solid #ddd;
}
Thanks
That’s great thank you. Is there anyway to adjust the numbering and border so it automatically fits onto a mobile device as the circled number doesn’t quite fit right. Everything else adjusts nicely apart from that.
Hi,
Inspecting the website you mention, it can be seen that there are different conditions that apply when the width is lower, like mobile devices
– https://www.screencast.com/t/TjUC88fUqO
This would the same code for smart list 2 for example
– https://www.screencast.com/t/wQL0tmoY
– https://www.screencast.com/t/60DSkdnPQUNP
You could modify it and experiment with different values, or use it as it is
@media screen and (max-width: 991px) and (min-width: 320px) {
.td-sml-current-item-nr {
top: -55px !important;
left: 0px !important;
right: 0px !important;
width: 60px !important;
height: 60px !important;
line-height: 55px !important;
margin: 0 auto;
}}
Thanks
thats great i’ll give that a try thank you very much I’ve noticed aswell that the text inside the box touches the border. how can i get the text to start slightly inside the border rather than touching it?. text align is set to center .
Hi,
It would be helpful if you could provide a screenshot, so I can see the exact issue. Or a link to the actual list, if possible. You can make modifications to the code to display better, adapt it further.
Use the browser inspector for this, it will allow you to identify the element and make modifications to it
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Thanks again.
On this link that you sent- https://www.screencast.com/t/b6iVdsbpxc
you can see the text is touching the border on the left. If i’d like the text to start slightly further to the right and not touch the border would i use something like
body
{
margin: 2;
padding: 0;
?
it is already set to
text-align: center;
Also, is there a way to align header 2 so it is central within one of the smart list boxes?
Hi,
Based on the previous examples using smart list style 2, you could text align the text to center if you wish
– https://www.screencast.com/t/mK8Mapo5
.td-sml-description p {
text-align:center;
}
Or maybe add some padding to the text, left, right or both sides
– https://www.screencast.com/t/FsBKOfxNlLmp
.td-sml-description p {
padding-left: 10px;
padding-right: 10px;
}
Experiment with these solutions and choose the one you think is best.
Thanks
