How to get this slider to fit better in iPhone screen

I've installed a simple slider
and the slider appears on the page successfully in my pc. I have this:

    <script>
    $(function(){
      var slider = new BSlider({
        structure: {
          container: {
            id: "my-slider",
            width: 1220,
            height: 420,
          }
        },
        content: {
          images: [
            "img/img1.png",
            "img/img2.png",
            "img/img3.png",
          ]
        },
        animation: {
          effects: effectSets["slider: big set 2"],
          interval: 9800
        }
      });
    });
    </script>
 

Code (markup):

What do I add so that the width fits an iPhone screen?

I look forward to any help, thanks

 

You either find a slider that doesn't set the width in px, or you change the CSS/code, or you remove the width and height and set those in CSS in either EM or %, and add @media-queries to cater for different screen sizes.

 

Thanks for your reply.
I've tried this in the header:

<link rel="stylesheet" type="text/css" href="css/demoX.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/demoY.css"/>

Code (markup):

and I can now adjust the width for iPhone with this in demoY.css:

#my-slider {
width:100%;
max-width: 970px;
height: 0 auto;
overflow:hidden;
border: 5px solid #ff0000;
}

Code (markup):

But demoX.css is not affecting the pc width:

#my-slider {
width:100%;
max-width: 1220px;
height: 0 auto;
overflow:hidden;
border: 5px solid #ff0000;
}

Code (markup):

on the pc, it shows what is reflected in demoY.css (which isn't wide enough on the pc screen).

any suggestion?

 

Eh, yes. Read up on @media queries in css. Of course what you have there won't work, you can't have different css files for different screens (well, you CAN, but it's not in any way smart)