Problem with a plugin image scaling

  • Resolved jamespond

    (@jamespond)


    5 years, 1 month ago

    I’m using “REAL3D Flipbook” plugin on my WP website with Tracks theme. The plugin generates flipbooks from PDF or Image files with several options to embed them in posts/pages using a “[real3dflipbook id=’XYZ’]” code.

    – Normal container DIV embed where it generates a box with the flipbook
    – Full screen flipbook on page load
    – Lightbox popup on click – this is where I’ve got an issue.

    In the Lightbox mode the plugin generates a thumbnail with set height to click on, which opens the book. The thumbnails work fine in desktop browsers but in mobile browsers they don’t scale with the rest of the page. Here’s how it looks like:

    View post on imgur.com

    I tested it on Huawei P30 Pro and Pixel 3 using different browsers. My phone’s screen res is 1080px wide, the thumbnail image is only 453px wide and yet it looks like this.

    I have switched my page to several other themes to test it and the thumbnail worked fine, so there’s seem to be an issue with Tracks forcing this size through CSS.

    The Flipbook plugin has an option to set a Custom CSS for lightbox thumbnail image. The current default one is display:block;

    Another issue is that it’s always aligned to the left, even if I place it as:

    <p style=”text-align: center;”>[real3dflipbook id=’XYZ’]</p>

    Any help with this would be greatly appreciated.

    • This topic was modified 5 years, 1 month ago by jamespond.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Tracks!

    Please try adding the following CSS to your site, and let me know how this works for the flipbook:

    .entry-content img {
  max-width: 100%;
}

    You can copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

    Thread Starter jamespond

    (@jamespond)

    It worked beautifully, thank you!

    Is there any simple way to also stop forcing the adjustment to the left in the desktop browsers?

    P.S. Do you have a paypal.me or similar link to tip you? You helped me several times even though my 6-months support expired ages ago!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome! And thanks for the offer to donate. If you’d like to renew your Tracks Pro license key, that’s a great way to support my efforts with the theme, and you’ll also get access to any updates you’ve missed out on since expiration.

    Thread Starter jamespond

    (@jamespond)

    There’s only one thing holding me back from renewing to upgrade, if this could be fixed then I’m in:

    I can create drop-down menus using the instructions here:

    https://support.competethemes.com/help/customize-menu-tracks/

    But what I really need is the “Create submenu containing links to posts in this category.” option to work. Right now it just adds all posts to the menu on my page like here:

    View post on imgur.com

    What I want is to categorise posts in categories and subcategories like:

    * photos
    ** city
    *** schools
    *** residential
    *** leisure facilities

    ** villages
    ** other places

    Would this work in the new version or could be somehow added?

    • This reply was modified 5 years, 1 month ago by jamespond.
    Thread Starter jamespond

    (@jamespond)

    Scratch that, the issue was partially caused by one of my Menu plugins, I have managed to get the cascading subcategories and posts menu to work.

    Now I just need to change font sizes as they’re a bit too large and make the menu items wider to fit all posts nicely.

    Theme Author Ben Sibley

    (@bensibley)

    Gotcha, well I can help out with some of the menu code. Menus are the most complex part of a theme’s CSS. I think this will give you the design you want or at least something close to it:

    @media all and (min-width: 37.5em) {

  .menu-secondary-items ul,
  .menu-secondary-items ul ul {
    left: 0;
    right: auto;
    max-width: none;
  }
  .menu-secondary-items li {
    white-space: nowrap;
  }
}

    Adding that code should improve the layout of your submenus in the secondary menu and you can add in a font-size property as well if you feel like the menu items still need to be smaller.

    Thread Starter jamespond

    (@jamespond)

    Thanks Ben, I renewed the license, it’s well worth it. Top theme and support. ??

    Just to be a pest for a bit longer, the menus now work fine but only in the first level of cascade. The following expanded menus don’t scale with the text, so the black background is too short and submenus overlap on the higher level submenus:

    View post on imgur.com

    View post on imgur.com

    Here’s all my additional CSS:

    /*
    You can add your own CSS here.

    Click the help icon above to learn more.
    */

    @media all and (min-width: 43.75em) {

    #main {
    width: 80%;
    max-width: 2000px;

    }

    .entry-container {
    padding: 0 3% !important;
    }
    }
    .entry-meta-bottom.float .entry-categories,
    .entry-meta-bottom.float .entry-tags {
    position: static;
    width: auto;
    text-align: left;
    padding: 0;
    }
    .entry-meta-bottom.float .entry-categories a,
    .entry-meta-bottom.float .entry-tags a {
    display: inline-block;
    margin-right: 0.375em;
    }

    .entry-content img {
    max-width: 100%;
    }

    #comments {
    max-width: 1880px;
    }

    .nav-links {
    font-size:5em;
    }

    .pagination a:link,
    .pagination a:visited {
    color: #f4a300;
    }

    .pagination a:hover, .pagination:active, .pagination:focus {
    color: #eeee22;
    }

    @media all and (min-width: 37.5em) {

    .menu-secondary-items ul,
    .menu-secondary-items ul ul {
    left: 0;
    right: auto;
    max-width: none;
    font-size: 1em;
    }
    .menu-secondary-items li {
    white-space: nowrap;
    }
    }

    .entry {
    max-width: none !important;
    }

    • This reply was modified 5 years, 1 month ago by jamespond.
    Theme Author Ben Sibley

    (@bensibley)

    Gotcha. It should work as intended if you add an !important tag to the right value like this:

    @media all and (min-width: 37.5em) {

  .menu-secondary-items ul,
  .menu-secondary-items ul ul {
    left: 0;
    right: auto !important;
    max-width: none;
  }
  .menu-secondary-items li {
    white-space: nowrap;
  }
}

    That’s the same snippet as before but with the one !important tag added.

    Thread Starter jamespond

    (@jamespond)

    You’re a star Ben!

    Theme Author Ben Sibley

    (@bensibley)

    Happy to help ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Problem with a plugin image scaling’ is closed to new replies.