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.

Preloader image gets cut off despite 110×110 png?

Home Forums General Questions Preloader image gets cut off despite 110×110 png?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #49699

    Hi,

    I did manage to swap the preloader image for the one I need to use.
    Loads fine, but, despite it being 110 x 110 pixel it gets cut of on the right side (highlighted yellow here).
    I only changed the code in the CSS as follows:
    /* __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%;
    }

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

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

    .v3d-simple-preloader-logo {
    background-image: url(‘media/android-chrome-110×110.png’);
    background-size: cover;
    }

    .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); }

    Can you please tell me which figure I need to change to avoid the cut off?

    Attachments:
    You must be logged in to view attached files.
    #49734

    Seems like the container of the logo is smaller than 100×100 try to change background-size to 100% or set it’s width and height to 100px.

    Co-founder and lead graphics specialist at Soft8Soft.

    #49752

    Writing 100% instead of cover fixed it. Here for anyone else who needs to see fix this:

    .v3d-simple-preloader-logo {
    background-image: url(‘media/android-chrome-110×110.png’);
    background-size: 100%;
    }

    Thanks.

    One more on loading there is a very thin blue line around the perimeter of my, now red, loading bar How do I change that in the CSS code of my opening post to be red as well?

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