Text not centering on Tablet

[jonathanrockett]

Hey Guys,

I just noticed something weird. I have a text element that is not centering on a tablet (iPad). I have the column text set to ‘center’ and I also have the text in the Text element itself set to ‘center’ as well…

It’s centered on desktop and also on a mobile phone (see images), but I happened to look at the site on my iPad and it’s not centering (It’s a Global Block btw, so maybe it’s a bug in the Global Block feature?).

Here’s the URL: https://sizzlingdigital.com (it’s the text below the CTA button at the bottom of the page)

Any help would be appreciated!

iPHONE:

IPAD:

[Prasant]

Hello Jonathan,

Thanks for writing in!

Please inspect the Column that’s holding button and text element. Under Customize > Setup > Class give a class name. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .center-text-class {
    display: inline-grid;
}
}

Please change center-text-class name with your own.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[jonathanrockett]

Thanks for the reply, Prasant,

I tried it and it didn’t seem to work (see images)… Did I do something wrong? Again, it’s only not centering on a tablet, which is weird…

[Prasant]

Hello Jonathan,

Thanks for updating the thread.

I am really sorry for the confusion. Looks like I missed to change the view port size in previous reply. Please update the code with following:

@media (min-width: 768px) and (max-width: 1024px)  {
  .center-text-class {
    display: inline-grid;
}
}

Let us know how it goes.

Thanks.

[jonathanrockett]

That worked! Thanks so much!

[friech]

We are delighted to assist you with this.

Cheers!