Upfront Slider Draggable Element - How can I center slider images at media breakpoints

Hi,

I've used the Upfront Draggable Element in a test webpage. It works very nicely in full desktop mode and I like how you can reposition the images to suit the slider.

If you view the slider on a table or phone (or make your browser window skinny) the slider resizes horizontally to suit the media break points.

However, images are left justified. This means in phone/tablet mode, the center and right hand side of the images is hidden and you can't re-align images in responsive mode for the slides.

This can look 'artistic' for the right images, but if you're displaying a building (lets say), the building needs to be in the centre of the image. Currently in in the phone media break point all you would see is the side of the building.

If, in responsive mode you resize the slider to suit the dimensions of the phone or tablet media break points, the full screen dimensions of the slider are lost and the slider does not work.

I'm sure the slider functionality will mature in future incarnations, so for now I'm looking for a temporary fix to align the slider image in the center. Then images in the slider will crop 'gracefully' maintaining the subject and meaning of the slide.

Another option may be to update the style of the slider so that the vertical height changes proportionately with the designated width.

Any ideas on how this can be achieved would be greatly appreciated.

jaq.

  • Vinod Dalvi

    Hi @Jacqui,

    I hope you are well today and thanks for posting on the forum.

    If, in responsive mode you resize the slider to suit the dimensions of the phone or tablet media break points, the full screen dimensions of the slider are lost and the slider does not work.

    This should not happen if you have selected proper device layout in Upfront’s Responsive Mode as described on the following page. It will only affect the changes for the selected device.

    https://premium.wpmudev.org/blog/upfront-responsive/

    Could you please share your test webpage URL where you are displaying the slider so that i can test it?

    Also would you mind if I logged in to your site and did some troubleshooting? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Vinod Dalvi

  • Jacqui Comer

    Hi Vinod,

    This should not happen if you have selected proper device layout in Upfront’s Responsive Mode as described on the following page. It will only affect the changes for the selected device.

    Yes I understand, but it's worth stating. I've only just worked out that you have to save before swapping to other media breakpoints in responsive mode.
    However, after saving in mobile responsive mode (last), the default (fullscreen) size gets corrupted and shows controls for large size, but images are same size as mobile layout.

    Example Page

    Temporary admin access has been granted.
    I've noticed that I can't edit the slider image (crop/resize) when in responsive mode either. Should I be able to?

    Thanks,
    jaq

  • Vinod Dalvi

    Hi Jaq,

    Thank you for your reply.

    However, after saving in mobile responsive mode (last), the default (fullscreen) size gets corrupted and shows controls for large size, but images are same size as mobile layout.

    I have made the changes for it but didn't face any issue it's working fine now on your site.

    Could you please check it?

    I've noticed that I can't edit the slider image (crop/resize) when in responsive mode either. Should I be able to?

    You can't edit the slider images but edit the size of whole slider. You can only select the image size when adding it in the slider as shown in the attached screenshot.

    I have displayed the whole images in responsive mode by adding the following custom code in the Upfront Custom CSS theme option.

    @media screen and (max-width: 1080px) {
    .upfront-default-slider-nav-next,
       .upfront-default-slider-nav-prev {
          margin-top: 80px !important;
      margin-bottom: 0px !important;
    	}
    	.upfront-default-slider {
      padding-top: 200px !important;
    }
    }
    @media screen and (max-width: 570px) {
    .upfront-default-slider-nav-next,
       .upfront-default-slider-nav-prev {
          margin-top: 50px !important;
    	}
    	.upfront-default-slider {
      padding-top: 100px !important;
    }
    }
    div.uslide-image img {
      max-width: 100%;
    }

    You will find more information about Upfront Custom CSS theme option on the following page.

    https://premium.wpmudev.org/blog/upfront-custom-css/

    Could you please check the slider now without editing anything in it and let me know how it works for you?

    Best Regards,
    Vinod Dalvi