[Resolved] A Very Thin White Line at the Bottom of Mobile View Page (Safari & Chrome)

[yitegele]

Hi GP Team!

How are you?

I find everything perfect about generatepress & blocks, but this one.

This is my second time to find this problem, which is, there is sometimes a very thin white line at the bottom of mobile view page, no matter safari or Chrome (iPhone 14 Pro, ios 16.2).

If you may check the GP Library pre-built site “Driver” and “Construction” and others too in MOBILE view, and the screenshot of my iPhone in below link, you will find a this white line at the bottom of some of the pages (not every page). When you reach the bottom, then if you drag the screen up, I will see this more clear.

I know it is not a vital problem, only a little strange to have this. Is it possible for your team to check whether this is my individual problem or a common situation for everyone?

Best regards,
Yi

[David]

Hi there,

its an iOS thing, which affects most iphones in one way or another.
One thing you can do is to set the theme-color of the site – see here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

Simply hook in th the theme-color meta eg.

<meta name="theme-color" content="#000000" />

into the wp_head and set your color. For Safari at least it then use that for the UI and Background.

[yitegele]

Hi David,

Thank you for your help.

I think this is solved to some extent. I change the theme-color to the same color of “the white line”, and this line will not be that noticeable, even though the line is actually still there.

Hope GP will solve this problem for good in the future, which is effecting many library pre-built templates. Thank you all the same.

At last, if I do not use pre-built template and build the website from scratch, is the white line possibly gone, or it is nothing about the pre-built template?

Cheers!

[David]

Its not a GP issue, or related to the pre-built sites. Its how the iOS browsers work, you can visit many other non GP or no WordPress sites and see the same thing.

If you want to avoid it, then using the theme-color meta can help 🙂

[yitegele]

Hi David,

Thank you.

Could you please have a look at following image, and help confirm is my setting correct, as I’m not good at coding?
Display Rule: Entire Site

As this white line is not on every page, for example, pre-building template called “Construction”, if you go through it on iPhone, you will find this white line happened on pages of “Services, Projects”, NOT on “Home, Company, Contacts”.

If this white line happened on every page, then no problem. But it is very strange that in the same website, some pages have and meanwhile some pages don’t have. That is my concern.

[David]

That is correct for adding the meta but make sure your quote marks are the straight ones ie. "

That gap is an anomaly with iOS / WebKit browsers, there is no difference between those pages for one to show a gap and one not to show the gap.

[yitegele]

Hi David,

Thank you for your help.

Cheers!

[David]

You’re welcome

[Author]

Posts