I am using Aviaslider on a single page of my wordpress driven site. Every time after a transition it resizes the image smaller (313x616), creates a border around it and leaves white space in the slider area on the right and bottom sides. I am using the default values in the scripts and css. The scripts are being called in the entry-content for the page. I checked to make sure my lightbox plugin wasn't creating a conflict, which it wasn't. Any ideas what could be causing this to happen?
Aviaslider Resizing images after transistion
12 posts from 4 voices- Started 1 year ago by esternullo
- Latest reply from Ismael
- This topic is closed
- This topic is resolved
-
esternullo
MemberNo, I have been working on it offline since I can't take down the current website until this one is working. I will have to figure out some way to get it live since every attempt I make at fixing it only makes things worse. I started over with fresh scripts this morning and it broke my layout, doesn't display slides, or transition anything.
I will have to get it live somewhere, cos I am at my wits end on this. Can I just dump my local wordpress folder in another server folder to get it running? otherwise I will have to backup a separate wordpress server I already have running and swap it there temporarily.
Posted 1 year ago # -
Please check if you changed the image dimensions in style.css - search for following code and adjust the width/height value:
.aviaslider{ height:320px; /*this changes the height of the image slider*/ width:640px; overflow: hidden; position: relative; background: #fff url(../images/layout/preload.gif) center center no-repeat; }Posted 1 year ago # -
esternullo
MemberI have the site live here:
I changed the size of the slider window, but no matter what size the images are inside, it resizes them to a specific width it seems like.
.aviaslider{
height:320px; /*this changes the height of the image slider*/
width:908px; /*changed from original size: 640px*/
overflow: hidden;
position: relative;
background: #fff url(../images/layout/preload.gif) center center no-repeat;
margin-top:-108px; /*cheated to cover up invisible heading*/
}
Posted 1 year ago # -
esternullo
Memberthat fixed the image resize issue, but the border is still there. once the transition is done, the image shifts so the border is visible on the top and left sides.
this reduced the side of the border a little bit, but didn't get rid of it all.
.aviaslider img, .aviaslider a img, .aviaslider a {
border: none !important;
min-height: 320px;
min-width: 908px;
}
Posted 1 year ago # -
Hi!
Try following code instead:
.aviaslider img, .aviaslider a img, .aviaslider a { min-height: 320px; min-width: 908px; } .aviaslider img, .aviaslider a img, .aviaslider a, .aviaslider li, ul.aviaslider { border: none !important; padding: 0 !important; }Best regards,
PeterPosted 1 year ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
