How to create responsive covers for flipbooks

Case: Image background (Recommended):

[dflip books="all" limit="8" thumbtype="img"][/dflip]
Double Internal Pages – Image
Meat Atlas
Test Book
Reflection
GLFW manual
Mazda 6
Mazda CX-9
Mazda 3

 

Case: Stretch background.:

[dflip books="all" limit="8" thumbtype="div"][/dflip]
Double Internal Pages – Image
Meat Atlas
Test Book
Reflection
GLFW manual
Mazda 6
Mazda CX-9
Mazda 3

 

Responsive CSS:

.dflip-books {
}

.dflip-books ._df_thumb {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
}

.dflip-books ._df_thumb:before {
    content: " ";
    box-shadow: 0 1px 2px rgba(0,0,0,0.22);
    height: 100%;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
}

.dflip-books ._df_thumb[thumbtype="img"] img {
    max-height: 100%;
}

.dflip-books ._df_thumb[thumbtype="img"] {
    width: 25%;
}

.dflip-books ._df_thumb[thumbtype="div"] {
    width: 25%;
}

@media only screen and (max-width: 900px) {
    .dflip-books ._df_thumb[thumbtype="img"] {
        width: 33.33%;
    }

    .dflip-books ._df_thumb[thumbtype="div"] {
        width: 33.33%;
    }
}

@media only screen and (max-width: 700px) {
    .dflip-books ._df_thumb[thumbtype="img"] {
        width: 50%;
    }

    .dflip-books ._df_thumb[thumbtype="div"] {
        width: 50%;
    }
}

@media (max-width: 400px) {
    .dflip-books ._df_thumb[thumbtype="img"] {
        width: 100%;
    }

    .dflip-books ._df_thumb[thumbtype="div"] {
        width: 100%;
    }
}

 

Leave a Reply

Close Menu