• This area is dedicated to the support of our xF1 add-ons. For xF2, please use the dedicated area: HERE.
  • We are aware that a no permission error was shown when you tried to purchase in the last 2 days, this is now fixed.

Support Image Slider Size and Dimensions

ScratchMang

New Member
Joined
Mar 13, 2018
Messages
3
Not a 'Bug' per se....

However, the Image Slider when placed on the forums will take the banner and enlarge it to the dimensions of the screen rather than using the original dimensions of the 'Banner Image' itself.

So for instance, a banner that is 750x150 when displayed get's enlarged to the screen size and can be displayed 1392x280.

Is there some way in which to have the banner's displayed at their "Original" dimensions when displayed on a Large screen (Laptop or PC) and still be 'responsive' when displayed on a Phone or Tablet?

Thanks.
 

ScratchMang

New Member
Joined
Mar 13, 2018
Messages
3
Oh wait....

I think I found it. But I'll post it here in case someone else is looking....

In the CSS Template "xfa_slider_owl_carousel.css"

Search for this section....

Code:
.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}
And Modify the "WIDTH:100%" to whatever you prefer...

Code:
.owl-carousel .owl-item img{display:block;width:60%;-webkit-transform-style:preserve-3d}
In My case I "Shrunk" the banner image to display at 60% rather than 100%
Also, when you do this, the Banner will align "Left" of the screen.

So adding "margin:auto;" right after the "width:60%" will center it once again....

Code:
.owl-carousel .owl-item img{display:block;width:60%;margin:auto;-webkit-transform-style:preserve-3d}
I've tested this, and the results remain "Responsive" on Phones and tablets.

Excellent Addon!


Hope this helps :)

Scratch
 
Last edited: