This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vertical allign in a row

Resolved 10 replies premiumthemetheme-vantage
artvaz
10 years ago · Last reply by bigwebmedia 9 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.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 10 years, 9 months ago

    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. artvaz 10 years, 9 months ago

    Cheers buddy now is working!!!

  3. Andrew Misplon Staff 10 years, 9 months ago

    Super :) Glad to hear that helped.

    All the best.

  4. artvaz 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    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. artvaz 10 years, 9 months ago

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

  7. Andrew Misplon Staff 10 years, 8 months ago

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

  8. artvaz 10 years, 8 months ago

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

  9. Josh 9 years, 11 months ago

    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. bigwebmedia 9 years, 7 months ago

    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.

Have a different question or issue?

Start New Thread