Make slider images a littler smaller to fit screen

Hi there,

Could you possibly tell me how to only have 3 images in the slider or else how to make the images just a little smaller to fit my 80% screen?

Thank you,
Leo

 

Hello Leo!

I think it will looks ugly and you cannot set for all views.
I have CSS code for Computer device with large width of screen.
You can try it, but i suggest you to keep it what ever it have at present.

Code:

.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 68%;
  margin: 0 auto;
}

Thanks & Regards
Pramod

 

Hi Pramod,

thank you very much for your help. I have made a slight modification because the images were not centered with your code (please see image 1) I have changed the code and it looks correct in image 2 but it is not centered in mobile. Can you please give me code that will make it centered in desktop but continue to look the same way it always did in mobile?

Code:

.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 75%;
  margin-left: 9%;
}

 

Hello Leo!

Your previous customization is creating this issue and it is too difficult to provide you css. It creates issue in other views.
You can use slider in full width for better result.

Thanks & Regards
Pramod Patel

 

Ok Pramod, is there any way of centering it for mobile with some custom css or please just have 3 images centered.

Or I will put the original code back in and - can you tell me how make the images 5px smaller than they are please?

I would really appreciate it.

 

Hi leo !

To make images 5px smaller, please use the css code given below.

Code:

directory.theliberal.ie/media="all"
.jcarousel-skin-tango li .post-thumb {
height: 195px;
width: 255px;
}
.post-thumb a img {
width: 255px !important;
height: 195px !important;
}

Thanks,
Praveen

 

Hi Praveen,

I worked this out myself and it works perfectly:

Code:

.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 75%;
margin-left: 8%;
}
 
@media only screen and (max-width: 767px){
.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 100%;
margin-left: 0;
}
}

Thanks,
Leo