Home>Support>Vertical allign in a row

Vertical allign in a row

By artvaz, 9 years ago. Last reply by bigwebmedia, 8 years ago.

Hello!

I’m struggling with the vertical align on the top row of the following page:

http://qpuntto.com/cliente1-2/

I want all the items in the 1st row go vertical align in the middle, as you can see the highest (the one in the middle) apparently is aligned in the center, but the two beside it, are not, how can I make all the items go to the center (in a vertical reference), no matter which is the highest?

URL: http://qpuntto.com/cliente1-2/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Hi Artvaz

    Thanks for reaching out.

    If you remove the padding that’s been applied to the last widget you’ll notice all three are top aligned.

    Try this, should do the trick:

    1. Edit the row in question by clicking the wrench icon > Edit Row.
    2. Click Attributes top right.
    3. Enter the following into the CSS Styles field:

    display: -ms-flexbox
display: -webkit-flex
display: flex
-ms-flex-align: center
-webkit-align-items: center
-webkit-box-align: center
align-items: center

    Ref: http://davidwalsh.name/css-vertical-center-flexbox

  2. 9 years, 4 months ago artvaz

    Cheers buddy now is working!!!

  3. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Super :) Glad to hear that helped.

    All the best.

  4. 9 years, 4 months ago artvaz

    Andrew, sorry but it worked really good in the desktop view but not in the mobile version, for some reason the image goes in a tiny size and the button overlay the text, what can I do????

  5. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    NP let’s do this. Remove the styles we added and instead add a CSS Class, it’s the first field under the Attributes tab:

    vertical-center

    Then go to Appearance > Custom CSS and target your new row class:

    @media (max-width: 680px) {

.vertical-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}

}

    What we’ve done is made our style stop below 680px to sort mobile up. Feel free to increase or decrease that pixel value to change when we drop our center align styles.

  6. 9 years, 4 months ago artvaz

    I think you might write “min-width” instead of “max-width” right?????

  7. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Whoops! Good catch. min-width indeed. Please change that. Thanks :)

  8. 9 years, 4 months ago artvaz

    Thank u ANdrew its really nice what all u people do for us

  9. 8 years, 6 months ago Josh

    I had the same issue with mobile display, one of the columns would disappear to fix that just use the flex-grow and flex shrink attributes and set both to 1, code is shown below:

    .vertical-center {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex-grow:1;
  flex-shrink:1;
}
  10. 8 years, 2 months ago bigwebmedia

    Hi there is this code meant to work in Safari? As it doesn’t work for my site On Safari

    This coding works perfectly on all browsers except Safari

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More