Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Looking to vertically align images in a slider to the middle

Link: http://mallorca-attraction-tickets.com/product/test-2/

The site is built on wordpress with elementor and woocommerce and uses the plugin “Twist” to display the woocommerce gallery pictures in a slideshow.

The height of the slides has been reduced to 400px using this css

.twist-pgs {
height: 400px
}

The images are aligned vertically to the top, due to the short height the bottom has been hidden. I am looking for a way to display the images so they are vertically aligned to the middle so a part of the top and bottom is hidden in the slider.

I can not find any css that can do this. Thank you for any help received with this. The owner of the plug in does not know either.

Tags:

2

Answers


  1. 0

    Please try this

    .woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 400px;
    background-size: cover;
    background-position: center;
    box-shadow: none;
    object-fit: cover;
}

    That should solve the problem. Do let me know if it works.

    Login or Signup to reply.
  2. 0

    Your image is aligned by this javascript:

    http://mallorca-attraction-tickets.com/wp-content/plugins/twist/assets/slick.min.js?ver=1.3

    It dynamically adds the transform to your source code:

    <div class="slick-track" style="opacity: 1; width: 7980px; transform: translate3d(-3420px, 0px, 0px);">

    The 0px, 0px are for top and bottom. You can try to set them to the image width / 2 .

    But first make a backup of the javascript file.

    And there is an option in the javascript file:

    vertical: false,

    Maybe it works if you change this one. It adds the class “slick-vertical”.
    If this doesn`t work, maybe you find another option.

    Regards Tom

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search