Center the logo in the page loader for mobile version

[Alex]

Hello,

I would like to know how to center the logo in the page loader for mobile version.

I have tested with safari, chrome in iPhone 5s and 6s, but in the loading page, the logo is not exactly in the middle center of the page.

Thank you in advance.

Alex

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

.page-loading.fullscreen-wrap {
	min-height: 100vh;
	min-height: -moz-available;
	min-height: -webkit-fill-available;
	min-height: fill-available;
}

Regards!
SeaTheme – SeaTheme.net – Twitter – Facebook

[Alex]

Thank you very much. This works on iPhone 6s.

But for 5s, when the phone is vertical, the logo is not in the middle.

And when iPas is horizontal, the logo is not in the middle either…

Many thanks again for your help 🙂

[SeaTheme]

Welcome!

What’s the iOS version of iPhone 5s / iPad?

[Alex]

For the iPad mini2 is 12.4.2.

iPhone 5s is 12.4.1.

Many thanks again.

[SeaTheme]

Please add the custom CSS:

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) {
 .page-loading.fullscreen-wrap {  
        height: auto!important;
	min-height: 100vh!important; 
	min-height: -webkit-fill-available!important;
	min-height: fill-available!important;
 }
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) {
 .page-loading.fullscreen-wrap {  
        height: auto!important;
	min-height: 100vh!important; 
	min-height: -webkit-fill-available!important;
	min-height: fill-available!important;
 }
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
 .page-loading.fullscreen-wrap {  
        height: auto!important;
	min-height: 100vh!important; 
	min-height: -webkit-fill-available!important;
	min-height: fill-available!important;
 }
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
 .page-loading.fullscreen-wrap {  
        height: auto!important;
	min-height: 100vh!important; 
	min-height: -webkit-fill-available!important;
	min-height: fill-available!important;
 }
}

[Alex]

Thank you so much!

The code works perfectly!

Honestly, you are the best webmaster I have ever worked with, you are so competent, efficient and so friendly.

[SeaTheme]

Thank you for your warm message, it is a big encouragement. We will try our best to provide our best products and services 🙂

---

If you are satisfied with our product and services, could you please rate our theme on Themeforest? I would greatly appreciate.

[Alex]

Yes, I have put a review !!! You are the most welcome 🙂

[SeaTheme]

Thanks!!!!!!:)

[Author]

Posts