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
Serge_1 0 Newbie Poster
diafol
Any chance you could show code / markup / css? My crystal ball's a bit cloudy at the mo.
Serge_1 0 Newbie Poster
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 803 Master Poster
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/
diafol
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 0 Newbie Poster
Thanks gentlemedia!! It works now.
Cheers
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.