Canvas Support

Icon Bullet List

9 replies · opened May 12, 2021

MMeegB61May 12, 2021

Hi, I have used the icon based bullet lists to highlight some key points. How can I make the second line indent to have the same margin-left as the first line? Thanks Megan

SSemicolon WebSTAFFMay 12, 2021

Hello,

Apologies for the Inconveniences!

We are already working on making this better and more flexible and an update will be released soon. Meanwhile, please consider using this CSS Code:
[ch_pre type="css"].iconlist li {
position: relative;
display: flex;
align-items: baseline;
}

.iconlist > li [class^="icon-"]:first-child,
.iconlist > li [class*=" icon-"]:first-child {
width: 1rem;
margin-right: 0.75rem;
}[/ch_pre]

This should definitely work fine. Hope this Helps!

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

SSemicolon WebSTAFFMay 12, 2021

Hello,

Simply update the above CSS with this:
[ch_pre].iconlist > li [class^="icon-"]:first-child,
.iconlist > li [class*=" icon-"]:first-child {
width: 1.5rem;
margin-right: 0.75rem;
}[/ch_pre]

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.

MMeegB61May 13, 2021

I have applied that but still get double lines compressing the icon vertically. Single lines are perfect, but double lines have the issue.
https://ozzikleen.treepl.co/grey-water-system-residential
Live url - if you can let me know if I have messed this up or some other issue.

SSemicolon WebSTAFFMay 14, 2021

Hello,

Apologies about this issue and Thanks for your Patience!

We have tested the codes and it works fine on One-Line List Items but the Two-Line Items gets squished. here is the updated code:
[ch_pre type="css"].iconlist > li [class^="icon-"]:first-child,
.iconlist > li [class*=" icon-"]:first-child {
width: 1.5rem;
margin-right: 0.75rem;
flex: 0 0 auto;
}[/ch_pre]

This will definitely fix the issue. Hope this Helps!

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

MMeegB61May 14, 2021

No need to apologise. I really appreciate being able to get support.

This has resolved it. Thanks a bunch, it's perfect! Tested on ipad Safari, android Chrome, desktop pc with Chrome, desktop Firefox, desktop Edge. I think you can write that up as fix. Thanks again.

SSemicolon WebSTAFFMay 14, 2021

Hello,

Very Happy to Help! :)

Glad to know that the issues was resolved on your end. We will be releasing an Update including this fix in a couple of days.

Do let us know if we can help you with anything else.

SSemicolon WebSTAFFMay 15, 2021

Hello,

Thank You so much for the Suggestions!

  1. We will be definitely introducing more Blocks in the near future with useful content/media combinations and we will definitely try including the examples you have mentioned as well. These types of Blocks are available in the Default Templates but they are just not sorted into Blocks at the moment. They are spread out between Niche Demos and other Templates. We are working on sorting them out properly and release them as Blocks.

  2. Unfortunately, currently this is not Alphabetically sorted but we will try adding a Glossary of Content in the Documentation which is Alphabetically sorted. Meanwhile, you can consider using this: http://themes.semicolonweb.com/html/canvas/library.php .

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