Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 28, 2024 at 3:15 pm #1470012
    boehmmedia

    Hello there,

    I have integrated an image with the full-screen Easy Slider on a website.

    Mobile this has a minimum height of 430px.
    As the image is now naturally wider than the mobile viewport, Enfold always shifts the image with “left: -410.667px”.

    I would now like to adjust the alignment similar to the fullwidth slider, e.g. with top centre. Unfortunately, all attempts in the dev tools to adjust the img element with object-position did not work.

    What other way is there to align the image in the slider elements?

    Kind regards
    Bernd

    October 28, 2024 at 9:14 pm #1470038
    Rikard

    Hey boehmmedia,

    I’m not sure that I fully understand your intentions. Could you post a screenshot highlighting what you would like to achieve please?

    Best regards,
    Rikard

    October 29, 2024 at 8:17 am #1470077
    boehmmedia

    Hi Rikard,

    the subpage pasted in private link was not a good example :-(

    Please see new link.
    As you can see, the couple in the mobile view is at the top left of the picture. You can mainly see the seat basket.

    I would now like the couple to be more central again – as it is in the desktop view in the picture.

    That’s why I thought i could use object-position to align the image accordingly.
    Of course, I could manually adjust the ‘left’ value for each image in each slider. But that is too complicated.

    Hope my intention is more clear now :-)

    Kind regards
    Bernd

    Kind regards

    October 29, 2024 at 12:23 pm #1470097
    Rikard

    Hi,

    Thanks for that. You can try to adjust the image using this CSS:

    @media only screen and (max-width: 767px) {
.av-m2t0bor4-75e1606503b18cd78e39619ca0beef30 li img {
  left: -150px !important;
}
}

    Best regards,
    Rikard

    October 29, 2024 at 1:42 pm #1470114
    boehmmedia

    Hi Rikard,

    the code worked. Thanks for it.

    Is there no more global solution for all elements?

    Kindly
    Bernd

    October 29, 2024 at 4:19 pm #1470138
    Rikard

    Hi,

    Yes, you can use this instead:

    @media only screen and (max-width: 767px) {
.avia-slideshow li img {
  left: -150px !important;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.