Image Slider > Images: Enlarge and align to center on mobile

Hi, The images on the slider have the same size but in mobile phones looks small and aligned to left, I would like to enlarge it and alined to center please using CSS.

Thanks for your help!

Hi Santiago,

Thanks for reaching out to JotForm Support. It's easy to make the images in the Image Slider widget bigger on mobile via CSS Injection, let me show you how:

1. Copy this code:

    /* Mobile-first approach - Full width image slider for mobile devices */

    @media screen and (max-width: 768px) {

      /* Target the main container that holds the image slider */

      .form-all,

      .form-section,

      .form-container {

        padding: 0 !important;

        margin: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

      }

       

      /* Target image slider container */

      .image-slider-container,

      .slider-container,

      .jotform-image-slider,

      .form-image-slider {

        width: 100vw !important;

        max-width: 100vw !important;

        margin-left: calc(-50vw + 50%) !important;

        margin-right: calc(-50vw + 50%) !important;

        padding: 0 !important;

        position: relative !important;

      }

       

      /* Target the actual images within the slider */

      .slider-container img,

      .image-slider-container img,

      .jotform-image-slider img,

      .form-image-slider img {

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        object-fit: cover !important;

        display: block !important;

      }

2. In Form Builder, click on the widget’s wand icon to open settings.

3. Select Custom CSS tab.

4. Paste the CSS code in the textarea

5. Click on Update Widget.

That's it. Here's what it should look like afterward:

Give it a try and let us know if you need any more help.