Text alignment issue with The Grid plugin

[ChrisDeBruyne]

Hi guys

I know you don’t usually help with third-party issues but Theme One doesn’t seem to have any support for The Grid so I’m really hoping you can help me.

I’m using The Grid plugin as part of the X license bundle and have run into a text alignment issue, that is only an issue in the following conditions:

• When the text needs to break to the next line owing to viewport width, which means this is a problem on mobile only.

I need the text to be center aligned vertically within the grid blocks, but as soon as it breaks on to a second line it seems to gain an extra top margin or padding that I can’t figure out how to remove. Additionally the .tg-item .tg-center-holder class is spacing the text using a set position of top:50% , which is also messing up the center alignment once the text breaks on to a second line.

You can see an example on this page: https://www.statusstones.co.za/silestone/ , with the ‘Charcoal Soapstone’ or ‘Classic Calacutta’ items displaying the issue mentioned above, when in mobile view.

The grid in question is using a custom skin I created to look and behave the way I need it to.

Hope you can help, and thanks in advance,
Chris

[ruenel]

Hello Chris,

Thanks for writing in!

By default, the display of the text is the default styling of the texts in the grid. To make sure that is it in the middle of the grid box, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.tg-item .tg-center-inner {
  position: relative;
}

.tg-item .tg-element-2 {
  position: absolute;
  bottom: 100%;
  width: 100%;
}

We would love to know if this has worked for you. Thank you.

[ChrisDeBruyne]

Hi Rue

Thanks for your response, unfortunately nothing changed after adding the CSS provided. Any other ideas on how to resolve the issue?

Thanks,
Chris

[lely]

Hi Chris,

It is specificity issue. Please update the second part of suggested CSS to this:

.tg-item .tg-element-2 {
    position: absolute !important;
    bottom: 100%;
    width: 100%;
}

Hope this helps.

[ChrisDeBruyne]

Hi Lely

Fantastic, it works now - thank you!

[rad]

You’re most welcome!