The Grid not centered in mobile

[joelneX]

I have scoured the support posts and found some helpful insight for The Grid. However, I have still not been able to fix an issue with centering content in mobile. Unfortunately, in the Pro editor mobile preview works fine and on a desktop browser it seems responsive when I make the screen small (see screenshot), but on iPhone the content will not center (see second screenshot).
From all that I have read this has something to do with the way The Grid calculates the view. I have tried CSS without any success and am hopeful that someone more clever than me can help fix this problem.

URL scoutspub.com “daily special” using The Grid Plugin, Pro 2.5., WP 5.1.1

thanks!

[rad]

Hi Joel,

Thanks for reaching out.

It’s the same on desktop, and it’s because the grid layer has minimum width of 420px. Have you set that width to your grid skin? I recommend removing that, it’s sill doable with custom CSS but they may affect the overall responsiveness.

Thanks!

[joelneX]

Thanks for your quick response. I did set that width in the skin. Now that I have removed the width, it seems to work okay in mobile, but is now not working correctly on desktop (see attached screenshot). For some reason the excerpt is not filling the space horizontally, but instead overflowing vertically.

No doubt I am missing something simple in the setup. However, I will say that The Grid is not the most intuitive plugin having settings in grid, skin and global that seem to conflict.

Thanks for your continued support.

joel

[ruenel]

Hello Joel,

Would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

[joelneX]

Hello,

I have solved the issue with the grid displaying vertical. However, I still cannot seem to get it to center in the content band.
This may be an easy fix using Pro rather than The Grid. As requested I am including access.

thanks,
joel

[friech]

Hi Joel,

Please add this to your skin custom CSS.

.tg-item .tg-top-holder {
    top: 25% !important;
}

Feel free to adjust the 25% value.

Thanks,

[joelneX]

Hello and thanks for looking into this for me.
However, perhaps I neglected to be clear about centering the content horizontally rather than vertically.
Nothing I have tried will make the grid content center horizontally for all view sizes.

I appreciate your help. I will continue to look for a solution or perhaps try Essential grid to see if it has
more controls for positioning content.

thanks!

[rad]

Hi Joel,

It’s already centered horizontally but it’s just too long which makes the text-overflow even with alignment. The solution that I provided is to make the text breaks into multiple lines.

But still couldn’t find what’s causing it since the width is still there but just narrower. Would you mind disabling the Wordfence for now? I’m trying to log in but couldn’t.

Thanks!

[joelneX]

Apologies Rad, I have removed the block and reset the credentials.
See attached screenshot of desktop where The Grid is not centered.
For comparison, I have done this on another site without any issues puckettsgro.com/nashville

thanks,
joel

[ruenel]

Hello Joel,

It is not centered because it you grid settings, you set to display 6 column. I went ahead and changed your settings to only to one column.

Please check your site now.

[joelneX]

That did the trick. Such a simple mistake on my part.

Thanks for the great support guys!

[rad]

You’re most welcome! Sorry for the confusion, I also thought you were also referring to text alignment.