Grid Text Not Central

Support
#1

Hi,

I have a grid whose text is not centering, even though the cell’s flex is set to center center and the Pro preview shows it being centered.

However, on mobile view the text is off to the right of the cell (see screenshot).

Is there any way of making sure the text is centered on mobile?

20210728_174607000_iOS
20210728_174607000_iOS1125×2034 326 KB

Thanks,
Christopher

#2

Hello @whitemedia,

Thanks for writing to us.

It seems that the grid text is aligned in the center on mobile devices. I have tested your site on the browser debugger mode and on my phone as well. It might be the cache issue at your end I would suggest you clear your browser cache and then check it again or it would be best if you could check it on the private mode of the browser.

Please have a look at the given screenshot in the secure note.

Thanks

#3

Hi Prakash,

Thanks for the reply and the screenshots. I am still having the same issue.

I have cleared the cache on an iPhone 11 Pro and the same issue persists. There is no cache on the website as it is in development. In addition, I have tried viewing the same page and grid on an old iPhone 6 which has never visited the website before. I get the same behaviour as my original screenshot.

Additionally, I notice that on the iPhone 6, as soon as a cell has faded into view (correct as set in Effects), it then fades out again and disappears after a few seconds!

Could this be a grid bug which affects iPhones / Safari only?

Thanks again,
Christopher

#4

Hello Christopher,

I am another staff and I am getting the same layout on my android phone. The texts are displayed at the center of the cells. Yes, this could be a bug in Safari. Do you have Chrome or other browsers on your iPhone? Please install a different browser and test your site again.

Kindly let us know how it goes.

#5

Hello Ruenel,

I have downloaded and installed Chrome on the iPhone. The text still shows aligned to the right of the cells exactly as in my original screenshot. This must rule out a Safari or Chrome bug. Do you have any other staff who can test with an iPhone to see if they get the same problem as I see?

Thanks,
Christopher

#6

Hi Christopher,

I have checked your website using the Browser Device Tool and online Device Testing Tools but didn’t find the issue you described earlier. I would suggest you check once by clearing all types of cache and in the incognito/private mode of the browser.

Hope it helps.
Thanks

#7

Hi Tristup,

All caches cleared, hard reboot of the phone, but still the same issue shown in the original screenshot.

Thanks,
Christopher

#8

Hi Christopher,

I have checked it again in an iPhone but the result was the same. Can you please mention the device, browser name and version, and also the operating system you are using, that helps us to replicate the issue at our end.

I would also request you to check in a different device, and if that shows the correct output there might be some issues with your device only.

Thanks

#9

Hi Tristup,

iPhone 11 Pro
iOS 14.7.1 (updated from 14.7.0 this afternoon)
Safari 14
Chrome 92.0.4515.90

iPhone 6
iOS 12.5.4
Safari 12

iPhone 7
iOS 14.7.1
Safari 14

All three versions show the grid cells’ text exactly the same as the original screenshot in my first post.

Thanks,
Christopher

#10

Hey Christopher,

The solution is similar to what I’ve given you previously here Replicate The Grid In Pro Grid Element. I now realize iOS requires Top and Left values of an Absolute Positioned element to be set.

Set the Div Top and Left value to 50% then in the Effects > Transform field, write translate(-50%, -50%).

image
image1259×514 27.6 KB

Note that if it’s the first time you’ll insert the transform code, you won’t see the Translate Options or Interface yet.

image

Hope that helps.

#11

Hey Christian,

Thank you once again. Your solution works perfectly!

May I ask one final question, which is not totally associated with the original problem. On the tablet layout of the grid I have three cell rows, but 8 cells. The current layout is left aligned on the final row like below:

XXX
XXX
XX

I have been unsuccessfully trying to get the final (XX ) row centred. I have seen it done somewhere, but cannot find the correct setting to do this. Are you able to point me in the right direction, please?

Many thanks,
Christopher

#12

Hello Christopher,

Thanks for updating in! Please be advised that centering the last two cells when using the Grid element is not as easy as when you are using flexbox or the rows/columns setup. Kindly check. out this article to fully understand the grid.

Best Regards.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.