Home Forums Art WordPress Theme Center the logo in the page loader for mobile version

This topic contains 9 replies, has 2 voices, and was last updated by  SeaTheme 2 weeks, 2 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #19685

    Alex
    Participant
    Purchased
    Supported

    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

    #19686

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.netTwitterFacebook

    #19704

    Alex
    Participant
    Purchased
    Supported

    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 🙂

    #19706

    SeaTheme
    Keymaster
    Purchased
    Supported

    Welcome!

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

    #19709

    Alex
    Participant
    Purchased
    Supported

    For the iPad mini2 is 12.4.2.

    iPhone 5s is 12.4.1.

    Many thanks again.

    #19711

    SeaTheme
    Keymaster
    Purchased
    Supported

    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;
     }
    }
    #19714

    Alex
    Participant
    Purchased
    Supported

    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.

    #19718

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.

    #19727

    Alex
    Participant
    Purchased
    Supported

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

    #19733

    SeaTheme
    Keymaster
    Purchased
    Supported

    Thanks!!!!!!:)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!