Unordered lists on the left?

Hi,

I'm adding a custom HTML module to the mainbody position with an unordered list like the following:

<ul class="gkBullet4">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

(The module has the following suffixes "bigtitle gk-description".)

When I view the page, the list appears OK but for some reason - on the left hand side of the screen, whilst the main text of the module appears centered. I've no idea why this happens.

How can I achieve center the list as well?

Thanks.

Hi,can you show me where you have it (URL) it will help me check/discover

Hi Oscar,

Thanks for getting back so quickly.

The URL is http://www.lookschool.es/en

Underneath the text "Welcome to Lookschool" you can see the list on the left-hand side of the page. I'd basically like to shift that ver into the middle. I tried a <div align="center"> just to see what it would do - the text values of the list moved over, but the bullets stayed over to the left.

Any help would be greatly appreciated.

Thanks in advance.

Hi,

If you want the gkBullet4 always be centered, you have to add the following code to the override.css

Code: Select all

ul.gkBullet4 li {
text-align: center;
}


And to have the bullets close to your text, add this one:

Code: Select all

.itemBody > div > ul.gkBullet4 li:before {
left: initial;
position: initial;
padding-right: 10px;
}


Don't forget to switch on the override.

Best,
Dirk

Hi Dirk,

I tried what you suggested, but I couldn't get the bullets close to the text. Although I want the list to be centered, I don't really want the items align-centered.

What I want to do is: Have the whole list centered, but the text for each list value is left-aligned, with the bullets close.

Have tried messing about with this for a few days, but can't get anything to work.

Thanks.

Hi,

now I got your point. You can put a <div> around your ul with some inline style.

Maybe something like this. A width is needed so that the margin: 0px auto will work

Code: Select all

<div style="display: flex;width:110px;margin:0 auto;">
<ul class="gkBullet4">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</div>


Best,
Dirk

Hi Dirk,

Sorry for the late reply, bu thanks for your help.

So I guess all is okey, no more question in this topic. So we can close it.