Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 30, 2018 at 9:25 pm #1003807
    Levante Golf

    Hi,

    I´m using the following code in order to restrict the height of specific fullwidth easysliders (Custom CSS Class – fullwidthpropage) :

    .fullwidthpropage .avia-slideshow-inner {
    max-height: 300px !important;
    }

    which is working great however I now need to center the images vertically. I´ve tried using the code:

    .fullwidthpropage .avia-slideshow li img {
    position: absolute;
    top: 300px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    }

    which I found in another thread however this is causing the easysliders to completely disappear from the screen!!?? Please see the link to the page below and the password required to access the page!

    Many thanks for your help in advance

    August 31, 2018 at 7:17 am #1003932
    Ismael

    Hey ProTravelGolf,

    Thank you for using Enfold.

    The slider is not displaying properly on my end. Is it using the same image as the “prices” section?

    Best regards,
    Ismael

    August 31, 2018 at 9:03 am #1003963
    Levante Golf
    This reply has been marked as private.
    September 2, 2018 at 1:36 pm #1004630
    Vinay

    Hi,

    I tried to troubleshoot this issue but I could not locate the element you mentioned on the page.

    Please make the element visible and remove the custom CSS you are using.

    Keep the custom CSS class name “fullwidthpropage” so we can help you with the necessary CSS.

    Best regards,
    Vinay

    September 3, 2018 at 11:58 am #1004901
    Levante Golf
    This reply has been marked as private.
    September 3, 2018 at 5:18 pm #1005068
    Vinay

    Hi,

    Is this how you like the element to look?

    #top .caption_bottom .slideshow_caption {
    bottom: auto !important;
    top: 50%;
    transform: translateY(-50%);
}

    If this is not what you are trying please elaborate what exactly are you trying to vertically center? If possible please share a mockup image. You can upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

    September 3, 2018 at 5:25 pm #1005074
    Levante Golf
    This reply has been marked as private.
    September 3, 2018 at 5:52 pm #1005086
    Levante Golf

    Vinay,

    It´s ok I´ve worked out how to do it now. The code I needed was as follows:

    .fullwidthpropage .avia-slideshow li img {
    margin-top: -20%;
    position: relative;}

    Many thanks for your help!!!

    September 3, 2018 at 5:57 pm #1005095
    Vinay

    Hi,

    Glad you figured it!

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Vertically align fullwidth easyslider image’ is closed to new replies.