Docs

[educainventions]

I’m trying to center the orange-2017 grid from here: http://www.educainventions.com/awards/

I have set the section text-align to center. I have added the following code to the style text entry: margin: 0 auto.

Unfortunately none of those ideas seem to work

Any idea?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

#esg-grid-8-1 .esg-overflowtrick {
    width: 26% !important;
    margin: 0 auto;
}

Hope that helps.

[educainventions]

It does not work yet. I have moved the Essential Grid to the main page: educainventions.com

I have used the following code:

/* Essential Grid of awards:
 centers the grid */
#eg-8-post-id-0 .esg-overflowtrick {
    width: 26% !important;
    margin: 0 auto;
}

What could be wrong?

Thanks!

[Thai]

Please try with this CSS:

#esg-grid-8-3 .esg-overflowtrick {
    width: 26% !important;
    margin: 0 auto;
}

Hope it helps 🙂

[educainventions]

Hi. It does not work well. The grid is centred, but the image becomes very small (see image attached).

Any other idea?

Thank you! 🙂

[Paul R]

Hi,

You can try this code instead.

#esg-grid-8-3,
#esg-grid-8-3 ul {
    max-width:300px;
    height:225px;
    margin:0 auto;
}

#esg-grid-8-3 li {
    min-width:300px;
    min-height:225px;
}

Hope that helps.

[educainventions]

Thank you! Unfortunately the code does not work either (see image attached).

Any other idea? Thanks for your persistence! 🙂

[Paul R]

In that case, please provide us your wordpress admin login in private reply.

Thanks

[educainventions]

This reply has been marked as private.

[Rad]

Hi there,

They aren’t going to work because essential grid uses absolute positioning calculated by javascript. And to center it, you have to add dimension to it, but adding dimension will only disable it’s responsiveness. But let’s try this, please add this.

 @media ( min-width: 768px ) {
  #esg-grid-8-3-wrap {
  max-width: 300px; 
  display: block;
  margin: 0 auto;
  }
}

Thanks!

[educainventions]

Same issue than before: the image becomes very small with that css (see image attached).

After your last comment, it came to my mind the idea of adding a raw element or maybe columns. Then controlling the width of those with css. Then including the shortcode within that column. The reason is that the Javascript seems to get the full width…

[Paul R]

This reply has been marked as private.

[educainventions]

WOW. Thank you for going ahead! It works perfectly in some screen sizes, but it does not work well in others.

However I’m realising it’s probably too complex to center it because of the Javascript stuff.

For me, it’s OK to stop this issue here. I did not think it would be so hard!

Thank you for your effort!! 🙂

[Rahul]

Glad to hear it!

Let us know if we can help with anything else.

Thanks for choosing the X-theme.

[Author]

Posts