Jquery not responsive to screens

Design help Custom code
1

I have implemented a jQuery plugin, but it is not responsive to any screen. The plugin is bigger than desktop screens and iPhones. It seems jQuery ignore the viewport. How can I make Jquery responsive?

2

How depends on what your plugin is doing. If you want to have your code respond to the width of the viewport you would use the window.innerWidth property. If what you want is to affect the styling that depends on which CSS is affecting the layout. Is another remote stylesheet being loaded or is there inline styles generated by code? There is no real simple answer. Depends on the plugin. Usually plugins have some documentation.

Your question also contains almost zero information (no details) so a general response is all I can do.

3

Hi Webdev,
Thanks so much for your answer. I want to give you more information about the plugin and the link where I implemented it.

It is a Flipbook Jquery Plugin from this website: Real3D FlipBook jQuery Plugin by creativeinteractivemedia | CodeCanyon

This is the link of my website with the plugin: https://www.artdoc.photo/e-magazine/test-mag-1
You will see the flipbook works, but it fits not on the screen.

And this is the code:
inside head tag:
< link rel=“stylesheet” type=“text/css” href=“flipbook.style.css”/>
< link rel=“stylesheet” type=“text/css” href=“font-awesome.css”>

and
Before body tag:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.statically.io/gh/artd-host/book/main/flipbook.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#sample-container").flipBook({
            pdfUrl:"link",
            viewMode:'3d',
            skin:'dark',
            zoomMin:0.7,
            menu2Transparent:true,
            icons:'material',
            btnPrint:false,
            btnBookmark:false,
            btnShare:false,
            btnPrint:false,
            btnDownloadPages:false,
            btnDownloadPdf:false,
            btnSound:false,          
        });
    })
</script>

<div id="sample-container"></div>

Which code would make that the flipbook fits exactly in the screen? Where and how should I use the window.innerWidth?

Thanks to your help in a previous post, the plugin finally works. I am very grateful to you:-)
Now the plugin only has to fit.

4

Modify the styling on the element .flipbook-main-wrapper and remove:

  • min-height: 1500px;
  • min-width: 1500px;

That should probably do it and not conflict with the external stylesheet style on that element. Your still going to need to make adjustments for different devices. I only had a minute to look.

5

Omg thanks so much!!! That was the solution. I am so happy! It works on every screen and device now. Thank you again for your help. Here is the link https://www.artdoc.photo/e-magazine/test-mag-1

6

Consider it a gift from a photographer.