How to center bulleted list ? - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
October 19, 2017 at 11:39 am #866159

micropoleinstitut
Participant

Hi,

Could you give the code to center bulleted list like this (it is a model) : https://imgur.com/a/bRNzA

When I try myself I get this : https://imgur.com/a/JA3d0

Here is the link from my page : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/conduite-du-changement/

Thanks

Best regards,

October 19, 2017 at 6:29 pm #866390

Jordan Shannon
Inactive Moderator

Hey micropoleinstitut,

If possible, please remove the css that you tried yourself.

Best regards,
Jordan Shannon

October 23, 2017 at 11:45 am #867576

micropoleinstitut
Participant

Hey,

I remove the bulleted list, but style impossible to have this (it is a model) : https://imgur.com/a/bRNzA

What do I have to do to have this alignment with my bulleted lists ?

Thank you

Best regards,

October 23, 2017 at 8:32 pm #867824

Basilis
Inactive Moderator

Hi,

I loaded the page and I see no bullets
Have those been removed are you OK?

Best regards,
Basilis

October 24, 2017 at 8:55 am #868018

micropoleinstitut
Participant

Hi,

Here they are : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/conduite-du-changement/

What do I have to do to have this alignment with my bulleted lists ?

Thank you

Best regards,

October 24, 2017 at 10:55 am #868076
Victoria
Inactive Moderator
Hi,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
.iconbox_content_container  ul {
    min-width: 100px;
    width: 50%;
    margin: 0 auto;
    text-align: left;
}
```
If you need further assistance please let us know.

Best regards,
Victoria
October 24, 2017 at 11:31 am #868103

micropoleinstitut
Participant

Hi,

Sorry I forgot to change my bulleted lists (I use a plugin to change the default style …).

Can you give me the code CSS, because it don’t works with this type of bulleted lists ?

Here is the link from my page with the new bulleted lists : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/conduite-du-changement/

Thank you

Best regards,

October 24, 2017 at 2:32 pm #868211
Jordan Shannon
Inactive Moderator
Hi,

Try adding the following to quick css:
```
.su-list ul {
    list-style: none !important;
    margin: 0 0 1.5em 90px !important;
    padding: 0 !important;
}
```
Best regards,
Jordan Shannon
October 24, 2017 at 2:53 pm #868230
micropoleinstitut
Participant
Hi,

I removed the old css code :
.iconbox_content_container ul {
min-width: 100px;
width: 50%;
margin: 0 auto;
text-align: left;
}

and replaced it by this one :
.su-list ul {
list-style: none !important;
margin: 0 0 1.5em 90px !important;
padding: 0 !important;
}

but it still not working.

Can you help me please ?

Here is the link from my page with the new bulleted lists : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/conduite-du-changement/

Thank you

Best regards
- This reply was modified 7 years, 1 month ago by micropoleinstitut.
October 24, 2017 at 3:47 pm #868246
Guenni007
Participant
please do erase all the rest you tried till now:
```
.su-list ul li {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: table !important;
}
```
maybe you play a bit with left positioning

BUT ! now you have to say if you only wanted to have it more specific. Because it goes to all su-lists
maybe you set a custom css on that fields where you like to have it
f.e. if you only want to have it on iconboxes:
```
.iconbox .su-list ul li {
    position: relative;
    left: 47%;
    transform: translateX(-50%);
    display: table !important;
}
```
October 24, 2017 at 4:09 pm #868250

micropoleinstitut
Participant

Hi,

That’s almost it !

But I need to center the columns differently from each because the bulleted lists of it’s columns do not have the same number of words.

Currently, I use this CSS code :

.iconbox .su-list ul li {
position: relative;
left: 40%;
transform: translateX(0%);
display: table !important;
}

But it is good only for the left column. Can you give me the CSS code for each different colomn please ?

Here is the link from my page : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/conduite-du-changement/

Thank you

Best regards

October 24, 2017 at 4:19 pm #868253
Guenni007
Participant
by the way the tranlate rule is wrong pasted but anyway this will be better so please test this first

the icons under each other and the text centered

remove the rules before and test this – this is important remove it ( the left 40% etc)

don’t know if flex design is allready used in modern browsers but you can test this:
```
.iconbox .su-list {
    display: inline-flex !important;
}

.iconbox .su-list ul li {
    position: relative;
    list-style-type: none !important;
    display: block !important;
    line-height: 1.3em;
    margin: 0 !important;
    padding: 4px 0 4px 2em !important;
    text-align: center !important;
}
```
October 24, 2017 at 4:30 pm #868269

micropoleinstitut
Participant

That’s perfect !! Thank you very much for your reactivity

Best regards,

October 24, 2017 at 4:34 pm #868270

Guenni007
Participant

have a look to it when text is centered and icons are under each other ( text-align : center) i think that is nice too !

De rien, pas besoin de me remercier

October 24, 2017 at 6:32 pm #868326

Jordan Shannon
Inactive Moderator

Hey Guenter,

Thanks for your help with this one.

Best regards,
Jordan Shannon
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.