We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

problem preloader

Home Forums General Questions problem preloader

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #46505
    Emma
    Customer

    I saw that I put the company logo as a preloader, in the mobile version (es.iphone 320x568h resolution), the logo does not remain in the center of the screen.

    Here link

    How can I fix it?

    Thanks in advance

    Emma

    • This topic was modified 1 month ago by Emma.
    #46528
    haris
    Participant

    Hi,
    Emma add this CSS code to your logo container :)

    display: flex;
    align-items: center;
    justify-content: center;

    Regards,
    Haris imran.

    harisimran1012@gmail.com

    • This reply was modified 1 month ago by haris.
    #46546
    Emma
    Customer


    Hi Haris,
    This is my file.css:

    /* __V3D_TEMPLATE__ – template-based file; delete this line to prevent this file from being updated */

    body {
    margin: 0px;
    overflow: hidden;
    }

    #v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    }

    .v3d-simple-preloader-bar {
    background: orange;
    }

    .v3d-simple-preloader-logo {
    background-image: url(“media/pippo.png”);
    }

    .fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
    }

    .fullscreen-open {
    background-image: url(‘media/fullscreen_open.svg’);
    }

    .fullscreen-close {
    background-image: url(‘media/fullscreen_close.svg’);
    }

    /* removes tap blinking on ios devices */
    * { -webkit-tap-highlight-color:rgba(0,0,0,0); }

    .preloader_div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #e6e6e6ff;
    }

    .div-block-4 {
    position: fixed;
    left: 40%;
    top: 40%;
    right: 0%;
    bottom: auto;
    display: block;
    width: 240px;
    height: 145px;
    background-color: #d3d3d3;
    background-image: url(‘./images/button_1.png’);
    background-position: 0px 0px;
    background-size: 125px;
    }

    .div-block-5 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-image: url(‘./images/preloader.svg’);
    background-position: 50% 50%;
    background-size: contain;
    }

    .div-block-6 {
    position: absolute;
    z-index: 2;
    width: 0%;
    height: 100%;
    float: left;
    background-color: #000;
    direction: ltr;
    font-family: ‘Oswald’, sans-serif;
    white-space: normal;
    }

    .text-block {
    display: relative;
    top: 60%;
    font-family: ‘Oswald’, sans-serif;
    color: #000;
    font-size: 40px;
    text-align: center;
    }

    You know where I put your 3 lines of code ….
    I tried to put it inside v3d-container, but it doesn’t work, surely I’m wrong :negative:

    Emma

    • This reply was modified 1 month ago by Emma.
    #46550
    haris
    Participant

    Hi,
    Emma i updated the things

    /* __V3D_TEMPLATE__ – template-based file; delete this line to prevent this file from being updated */

    body {
    margin: 0px;
    overflow: hidden;
    }

    #v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    }

    .v3d-simple-preloader-bar {
    background: orange;
    }

    .v3d-simple-preloader-logo {
    background-image: url(“media/pippo.png”);
    }

    .fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
    }

    .fullscreen-open {
    background-image: url(‘media/fullscreen_open.svg’);
    }

    .fullscreen-close {
    background-image: url(‘media/fullscreen_close.svg’);
    }

    /* removes tap blinking on ios devices */
    * { -webkit-tap-highlight-color:rgba(0,0,0,0); }

    .preloader_div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #e6e6e6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .div-block-4 {
    position: fixed;
    bottom: auto;
    display: block;
    width: 240px;
    height: 145px;
    background-color: #d3d3d3;
    background-image: url(‘./images/button_1.png’);
    background-position: 0px 0px;
    background-size: 125px;
    }

    .div-block-5 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-image: url(‘./images/preloader.svg’);
    background-position: 50% 50%;
    background-size: contain;
    }

    .div-block-6 {
    position: absolute;
    z-index: 2;
    width: 0%;
    height: 100%;
    float: left;
    background-color: #000;
    direction: ltr;
    font-family: ‘Oswald’, sans-serif;
    white-space: normal;
    }

    .text-block {
    display: relative;
    top: 60%;
    font-family: ‘Oswald’, sans-serif;
    color: #000;
    font-size: 40px;
    text-align: center;
    }

    #46577
    Emma
    Customer

    Hi Haris,

    thanks for your help , but as you can see it doesn’t work :-(
    (obviously I always talk about mobile)

    Emma

    #46580
    haris
    Participant

    You can talk more about this on gmail harisimran1012@gmail.com

    #46582
    Emma
    Customer

    gmail ? why ?

    this forum is made just for that, no ?

    Emma

    • This reply was modified 4 weeks, 1 day ago by Emma.
    #46585
    haris
    Participant

    Ok your choice, can you share screenshots again

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.