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

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

    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

    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

    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

    Welcome!

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

    #19709
    Alex
    Participant
    Purchased

    For the iPad mini2 is 12.4.2.

    iPhone 5s is 12.4.1.

    Many thanks again.

    #19711
    SeaTheme
    Keymaster
    Purchased

    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

    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

    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

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

    #19733
    SeaTheme
    Keymaster
    Purchased

    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!