Dividing numbered lists into columns

[ChristineESL]

Hi. I want to create a numbered list of items but divide it into 2 columns. Two problems with this 

1) I don't know how to restart the 'numbering' in the second column unless I just number them manually

2) When I have the list in two columns, numbered manually, and then pull up the site on a mobile device, the columns appear one below the other, which is fine except there's an extra space between them that I don't want.

Is there anyway to 'restart numbering' so you can break a list into columns?

And, what's the best way to make sure the columns look right on a mobile device?

Thanks.

[Adam7]

if you want it to stack correctly on mobile, you'd like to do a single item in each column of a one columns element, then do a single item in each column of a new columns element, and number them manually. It would be something like this:

_______________________

| 1. Name.     |.   Content.     |

|__________|___________|

_______________________

| 2. Name.     |.   Content.     |

|__________|___________|

_______________________

| 3. Name.     |.   Content.     |

|__________|___________|

[ChristineESL]

I think that's what I've been doing (having manually-numbered items 1-10 in the first column and then items 11-20 in the second, adjacent column. The problem is that there's still a space between the columns on mobile, and the format of the numbering is different than the rest of the page (since I had to do it manually instead of using automatic numbering). I'm attaching screenshots . Please let me know if I'm misunderstanding you.

[Adam7]

We add some padding underneath each column on mobile. It might be possible to add some custom CSS code to stop it on that particular page. Could you post a link to this page on your published site? We have some members here in Community that are familiar with CSS and could help.

[ChristineESL]

Sure, here is a link to a sample page.
https://www.americanenglishsounds.net/p-pair-price.html

[Adam7]

Thanks! @BJ is one person who does this a lot and might be able to help.

[BJ5]

Hmm... 

doing something like this might work. Put this in an Embed Code element directly before your columns element:

<style>
    div.paragraph
    {
        padding: 0px;
    }
</style>

Then put this in an embed code element directly after the columns:

<style>
    div.paragraph
    {
        padding: 0 0 1.5em;
    }
</style>

That should make it so it only removes the padding for those specific columns elements.

[ChristineESL]

I'm not sure that worked. Do you mean 'before/after' as in "above/below' the columns, or adjacent?  Before/after just one column or the whole set of columns?

[BJ5]

I think before and after the set of columns is probably easier to manage. Oh, one small tweak: 

-  change "padding: 0px;" to:   padding: 0px !important;

-  change "padding: 0 0 1.5em;" to:   padding: 0 0 1.5em !important;