Responsive banner slide in Dreamwever

[Serge_1]

Hi all,
I'm new in this forum and also completely newbie in Web development-so please forgive my lack of knowledge..
I'm modifying a Web template and I've inserted images slide on banner. I reduced images width to fit the size of the site width but still not responsive on others devices particularly on tablet.. The images completely swing out and leave a huge margin on the right side.
I'm using "EasyRotator" for the slide and can't figure out how to modify in css.
Any help please?
Many thanks

Any chance you could show code / markup / css? My crystal ball's a bit cloudy at the mo.

[Serge_1]

Thanks Diafol. Here's the code located in header within banner.Can't comprehend how turning responsive in Dreamwever.
Thanks

<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1300px; height: 400px; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-109-97-99-117-115-101-114-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="Banner slide" data-ertid="{clqxsjcw3d0591397103741}">
  <div data-ertype="content" style="display: none;">
    <ul data-erlabel="Main Category">
      <li> <img class="main" src="images/ecombanner2.jpg" /> <img class="thumb" src="images/ecombanner2.jpg" /> </li>
      <li> <img class="main" src="images/banner2.png" /> <img class="thumb" src="images/banner2.png" /> </li>
      <li> <img class="main" src="images/banner3.png" /> <img class="thumb" src="images/banner3.png" /> </li>
    </ul>
  </div>
  <div data-ertype="layout" data-ertemplatename="NONE" style="">
    <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:70px;" data-erconfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
      <div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">
        <div class="erimgMain_slide">
          <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
        </div>
      </div>
      <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
      <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;"></div>
    </div>
    <div class="erimgMain rotatorTileNav" style="position: absolute; left:0;right:0;bottom:0;height:80px;" data-erconfig="{numTiles:-1, scaleMode:'showAvailable', imgType:'thumb', loopNextButton:false, arrowButtonMode:'rollover', __slideLinkEvent:'rollover'}">
      <div style="position: absolute; left: 0; top: 10px; right: 0; bottom: 0; background: #FFF;"></div>
      <div class="erimgMain_slides" style="position: absolute; left:0px; top:0; bottom:0; right:0px;">
        <div class="erimgMain_slide">
          <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 10px; bottom: 0; margin: 2px 1px;"></div>
          <!-- <div class="" style="background: #555; position: absolute; left: 1px; right: 1px; top: 10px; bottom: 0; padding: 5px; color: #FFF; font-family: Arial; font-size: 12px; text-align: center;">
                        <p class="erimgMain_title" style="padding: 5px; margin: 0 0 3px 0; font-weight: bold;"></p>
                    </div> -->
          <div class="selectionArrow visibleWhenSelected" style="position: absolute; top: 0; left: 50%; margin-left: -10px; width: 20px; height: 10px; background-image: url('http://easyrotator.s3.amazonaws.com/1/i/rotator/FFF_arrow10_export.png');"></div>
        </div>
      </div>
      <div class="erimgMain_arrowLeft" style="position:absolute; left: 60px; top: 50%; margin-top: -10px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div>
      <div class="erimgMain_arrowRight" style="position:absolute; right: 60px; top: 50%; margin-top: -10px;"></div>
    </div>
    <div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
      <br />
      Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
      <br />
      <a style="color:#FFF;" href="#" class="erabout_ok">OK</a> </div>
    <noscript>
      Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com.  Please enable JavaScript to view.
    </noscript>
    <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
  </div>
</div>
<!-- End DWUser_EasyRotator -->

[gentlemedia]

Wow! DW and its extensions still spits out some messy HTML & CSS :)
I see a fixed width and height in px as inline CSS, so like this it will never get responsive.

Although I read on their site that the rotator can be responsive, but throught the GUI of the extension. Did you checkout their support page?

http://www.dwuser.com/support/easyrotator/kb/responsive-dimensions/

OMG, what horrible markup and inline styling. No wonder DW is dying a death. Sorry not wading through that. Goodd luck with it though.

[Serge_1]

Thanks gentlemedia!! It works now.

Cheers