How to create responsive covers for flipbooks

Settings:

The settings are available under dFlipBooks -> Settings as Book Thumb Type. Available options are Image and Div and respective HTML elements will be used to display the thumb image. We recommend using Image option for advanced users.

Book thumb type DearFlip, bigger thumb

Note: The value can be overridden from shortcode using thumbtype attribute.

Case: Image background (Recommended):

[dflip books="all" limit="8" thumbtype="img"][/dflip]
Booklet Mode
CSS Book
Image Flipbook
Open Book
Open Book
Toa Heftiba Travel Photography Portfolio
Test dFlip Manual Book
Double Internal Pages – Image

Case: Stretch background.:

[dflip books="all" limit="8" thumbtype="div"][/dflip]
Booklet Mode
CSS Book
Image Flipbook
Open Book
Open Book
Toa Heftiba Travel Photography Portfolio
Test dFlip Manual Book
Double Internal Pages – Image

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 Comment