Reduce size of slider images and padding

Hi! i have been trying to configure the cali theme for the whole week and love the flexibility.

Currently the slider is fixed at 4 posts, is it possible to reduce the size to fit 5?
Also, how can i reduce the spacing between the category and title and between images?

Below i have attached a screen shot of the specific areas im referring to:

Thank you!

Hello there,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if ( $.fn.owlCarousel ) {
        // Article Carousel/Slider
        $( '.ca-slider.js-ca-article-slider' ).each( function() {
            $( this ).owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayHoverPause: true,
                responsiveClass: true,
                responsive:{
                    0:{
                        items: 2,
                        margin: 5
                    },
                    768:{
                        items: 3,
                        margin: 10
                    },
                    1200:{
                        items: 5
                    }
                }
            });
        } );
      }

    })(jQuery);
  1. Update
  2. Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (min-width: 1200px) {

      .ca-slider_slide {
        width: calc(20vw - 10px) !important;
      }

    }

    @media only screen and (min-width: 768px) {
      .slide-overlay_category {
        margin-bottom: 5px !important;
      }
    }

Flush any applied before reloading your site. Because it usually prevents new CSS/JS code addition to take effect in the front end.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi, thanks!
It works perfectly on mobile :slight_smile:

But this is what the desktop version appeared:
4 images with an increased spacing.
Im using macbook pro 15", viewing at full screen

Hello there,

Try clearing you web browser’s history as it usually prevents new code addition to take any effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

If possible, to help me inspect what’s actually stopping it, please share a link to your site here.

Regards,
Kharis

Hi, i have cleared the cache and it still doesn’t work

My web url:

http://applelalaland.com/

Thank you. Regards

Hi wonder if anyone can help in this?

Hello there,

I viewed the source code of your site and found the below line of code is incorrectly placed.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Try removing it from Custom JavaScript, as it causes script conflict.

Such that line should be inserted separately with a plugin like Header and Footer Scripts.

Regards,
Kharis

It works like magic! thanks!

Great!

You’re welcome! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis