Columns and Expand

  • Resolved Cirnu

    (@cirnu)


    9 years, 9 months ago

    Hi,
    I have 2 rows on a page, composed of 4 columns each, hence “1/4”. Each last column has the attribute last = "1".

    For each of my text block (2 rows by 4 columns = 8 blocks) I use an “expand” shortcode, in order to allow the user to click and “see more” text.

    Everything is doing fine for the first 3 rows of each line, but when I click on “see more” in the last ones, everything located below the row is shifted downwards ! For instance, if 4 more text lines appear, below my row everything will be shifted by 4 lines !

    Even if I let enough space between the 2 rows, the problem remains the same.

    Here is the page where I have this problem : https://www.newstart-project.com/partners/

    Thanks for your help !

    https://www.ads-software.com/plugins/shortcodes-ultimate/

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello. This is an easy fix.
    Did you know that you need to wrap columns with [row] shortcode?

    I analyzed your page and you actually have 4+3 columns all floated to the left.

    Even if I let enough space between the 2 rows, the problem remains the same.

    I also noted that the so called space you provided is in fact made of 4 paragraphs <p>&nbsp</p>. In order to “leave some space” you should add a min-height property of like 300px (adjust at will) to the first row.

    Conclusion : Enclose your columns in rows and make a css class to the first row with min-height: 300px;

    here is an example :

    [su_row]
[su_column size="1/3"]Content[/su_column]
[su_column size="1/3"]Content[/su_column]
[su_column size="1/3"]Content[/su_column]
[/su_row]

    Hope this might help you.
    If it did, mark the thread as solved.

    Thread Starter Cirnu

    (@cirnu)

    Hi,
    thanks a lot for your simple solution, it works great !
    By the way, how can I align an image and a text of a column to other ones in the row ? I resized my images to the same size, but I have different results, how can I do ?
    Regards

    Not sure what do you mean by “aligning to the other ones” ?
    Do you want all your containers to have the same height ?
    or do you want them to look alike in proportions ?

    Thread Starter Cirnu

    (@cirnu)

    It’s ok now, thanks ! I meant that all images would line up on the same row

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Columns and Expand’ is closed to new replies.