0

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

3
Contributors
5
Replies
36
Views
11 Months
Discussion Span
Last Post by Serge_1
0

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 -->
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.