Support » Plugin: Page Builder by SiteOrigin » Cell alignment

  • Resolved andi0tx

    (@andi0tx)


    Hi,
    I have a row with two cells(each 50%). One has an image widget in it and the other one a paragraph. Both cells should have the same height (even though the paragraph is shorter then the image on desktop view) so I set the cell alignment to “stretch”. However, I also want the paragraph to be horizontally and vertically centered in its cell. How can I achieve this? I can vertically center it by using p style=”text-align:center”, but how can I horizontally center it?

    Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Andrew Misplon

    (@misplon)

    Hi andi0tx

    Thanks for reaching out.

    Cell Vertical Alignment: Stretch will stretch the cells in the row to the same height. To view this in action, try editing the row and clicking on your cell with the text in it, once the cell is selected a new section will appear in the right column (Cell 2 Styles). Within that section, open the Design section and set a cell background color. Next, go back to the overall row settings and change Cell Vertical Alignment from Stretch to Center, save and view the page, then change it back to Stretch, save and view the page again.

    Please, also see: https://wordpress.org/support/topic/equal-column-height-in-page-builder/.

    Cell Vertical Alignment, unfortunately, can’t stretch the text contents of a cell. If you changed Cell Vertical Alignment to Center it would center the paragraph text so perhaps that can work for your use case.

    Thread Starter andi0tx

    (@andi0tx)

    Hi there,
    thanks, I knew about the “stretch” option and had already applied this. But I need to center align the paragraph, that’s my issue! See here:

    Sketch

    The black cell is the image and the text in the second cell needs to be centered, vertically as well as horizontally.

    Plugin Author Andrew Misplon

    (@misplon)

    If you’d like to send a link to the page concerned, that’ll help.

    Stretch won’t be doing anything to the text so unless you have a background color applied to the cell, you can try the following. Edit the row and click on the right cell, after doing so cell styles panel will appear. Change the vertical alignment for just that cell to center. Stretch being your row level setting will then apply to the cell on the left but the cell on the right with text will be vertically aligned instead.

    Thread Starter andi0tx

    (@andi0tx)

    Hi,
    thanks, but unfortunately I need a background color for the paragraph cell 🙁
    And my site is on local host. See another screenshot how I would like it:
    screenshot

    Plugin Author Andrew Misplon

    (@misplon)

    Thanks for the image. Try setting the background color on the row, not on the right cell. Then change the cell on the right to center and not stretch. The final challenge will be the image, you’d need to make sure no alignment class is added. It might need line-height: 0; added to the container depending on the theme. Here is a demo layout you can try: https://siteorigin.com/wp-content/uploads/2019/03/cell-alignment.zip. Unzip and import to a page via Page Builder: Layouts > Import Export.

    Thread Starter andi0tx

    (@andi0tx)

    Hi,
    thank you, This worked somewhat.
    Now I also have another page though where I need to have space between the cells,
    like in my screenshot here.
    There are two rows, and each row has an image and the text beside it in a seperate cell, The text and headline should have a background color and be centered horizontally and vertically as well…is this possible? I could not get it to work since I can’t set the ackground color for the row in this case. Thanks!

    Plugin Author Andrew Misplon

    (@misplon)

    I’m not 100% with you…yet. To confirm, you can set the background color on a cell by cell basis. You can edit a row and click on a cell. Once you’ve selected a cell, a new Cell Styles section will appear in the right column. There you can set a background color for the cell. Does that help?

    Thread Starter andi0tx

    (@andi0tx)

    My problem is that if I set the cell background to be a certain color but I need the ceel to be the same height as the image AND the text in the cell should be centered horizontally and vertically – how do I achieve this? If I set the cell layout to centered, the text is centered but the cell is not the same height as the image any longer. For this, I would need to set the row to “stretch” and give the row the background color, as you advised before…but then I would not have a space between the cells…

    Plugin Author Andrew Misplon

    (@misplon)

    So as to not disappoint in the future, just a quick mention that this is normally more than we can offer in our free support scope. We can do a lot more like this in our premium email support scope.

    Please, try my demo layout on a test page: https://siteorigin.com/wp-content/uploads/2019/03/home-page.json.zip

    If you edit each row and click on the text cell and then open Attributes, you’ll see for Cell Styles I’ve added:

    display: flex;
    align-items: center
    justify-content: center

    Hope that helps 🙂

    Ref David Walsh: https://davidwalsh.name/css-vertical-center-flexbox

    Thread Starter andi0tx

    (@andi0tx)

    Thank you soooo much!!!

    Plugin Author Andrew Misplon

    (@misplon)

    Glad that helped 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Cell alignment’ is closed to new replies.