How to create columns

  • Resolved Jairo Ochoa

    (@jairoochoa)


    5 years ago

    Hi,

    Contact List is shown as a 1 column list.

    I share this CSS to create columns easily.
    To change the number of columns it’s only necessary to change percentages and nth-child values

    
#contact-list-search ul li { width: 32%; float: left; margin-right: 1%; }
#contact-list-search ul li:nth-child(3n+1) { clear: left; }
#contact-list-search ul li:nth-child(3n+0) { clear: right; }

@media (max-width: 992px) {
	#contact-list-search ul li { width: 49%; float: left; margin-right: 1%; }
	#contact-list-search ul li:nth-child(2n+1) { clear: left; }
	#contact-list-search ul li:nth-child(2n+0) { clear: right; }
}

@media (max-width: 748px) {
	#contact-list-search ul li { width: 99%; float: left; margin-right: 1%; }
	#contact-list-search ul li:nth-child(1n+1) { clear: left; }
	#contact-list-search ul li:nth-child(1n+0) { clear: right; }
}

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Anssi Laitila

    (@anssilaitila)

    Hi,

    Thank you for sharing, this seems useful.

    Thread Starter Jairo Ochoa

    (@jairoochoa)

    You’re welcome.
    ??

    jb0591

    (@jb0591)

    @jairoochoa, is there a way to have this only affect the contact display? I want to put the submit contact below but it gets affected by the column settings in this CSS. If i put a button to a new page (where the users can add a contact) then the button is displayed in the columns.

    Thread Starter Jairo Ochoa

    (@jairoochoa)

    Hi @jb0591

    Please share a link.
    I did not use the form, just the contact list.

    Thanks

    jb0591

    (@jb0591)

    @jairoochoa

    Sorry I cant as it is on an Intranet. If you can try this:
    – Add four contacts to list
    – Use your CSS code
    – Add the contact list and contact list form short code to a page

    e.g
    [contact_list]
    [contact_list_form]

    Then preview the page.

    I would attach a screenshot but not sure how.

    Thread Starter Jairo Ochoa

    (@jairoochoa)

    Hi @jb0591

    As I can see contact list have this ID #contact-list-search but form has this ID contact-list-form-wrap so the css does not modify form columns.

    jb0591

    (@jb0591)

    @jairoochoa

    I see that the first and last name text entry is aligned based on the CSS (based on the 4 contacts in list). The rest pf tje contact list form isnt.

    Eg

    Joe Blogs…………..Joe Smith………………Joe Adhoc
    Type……………….Type…………………..Type

    Joe Jones…………………………………..FIRST NAME
    Type……………….LAST NAME

    JOB TITLE
    EMAIL
    PHONE
    Etc…

    • This reply was modified 5 years ago by jb0591.
    Thread Starter Jairo Ochoa

    (@jairoochoa)

    I cannot see this.
    On my side the form is shown in 1 column.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to create columns’ is closed to new replies.