Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • April 16, 2021 at 3:17 pm #1294807
    sitesme

    Hello,

    Easy Slider’s captions are aligned at the bottom left. Is it possible to align them at the bottom right, and with less padding?
    As closer as possible from the bottom right corner of each image, like 10 px padding on the right and bottom.

    Can someone please help with this?

    Many thanks.

    April 19, 2021 at 9:22 am #1295175
    Rikard

    Hey sitesme,

    Please try the following in Quick CSS under Enfold->General Styling:

    .avia-slideshow-inner .avia-caption {
    left: auto;
    right: 0;
}

    Best regards,
    Rikard

    April 19, 2021 at 9:32 am #1295184
    sitesme

    Hi Rikard,

    Thank you for the code. Unfortunately, it didn’t work. Is this for the “Easy Slider” element (not full slider)?

    Please check the page in private

    April 21, 2021 at 6:13 am #1295681
    Rikard

    Hi,

    You asked for code for the Easy Slider, I’m not sure which element you are looking to align the captions for now?

    Best regards,
    Rikard

    April 21, 2021 at 7:15 am #1295697
    sitesme

    Hi Rikard.

    That’s exactly what I asked, for the Easy Slider. What I am trying to say is that the code didn’t change anything. Please check the URL in private.

    In addition to the captions alignment to the right of the image, can you please also give me a separate code to move these same captions closer to the left/bottom corner of the image? Then, I can add the margins in px to make it look like we are planning.

    Thank you

    April 23, 2021 at 7:03 am #1296205
    Rikard

    Hi,

    Please try this CSS instead:

    .avia-slideshow .avia-caption {
    left: auto;
    right: 0;
}

    Best regards,
    Rikard

    April 23, 2021 at 7:13 am #1296211
    sitesme

    Thank you Rikard, you’re a star :)

    Could you please give me the CSS to align the same text to the bottom-left (like the original) but without any padding/margin? Right at the corner?

    Thank you

    April 25, 2021 at 7:18 am #1296572
    Rikard

    Hi,

    Please try this CSS instead:

    .avia-slideshow .avia-caption {
    left: auto;
    right: 0;
    padding: 0;
}

    Best regards,
    Rikard

    April 25, 2021 at 7:48 am #1296575
    sitesme

    Hi Rikard,

    We are getting there, thank you.

    There is only one small gap between the picture edge and the caption background: https://dns.d.pr/LmKXF2/oyGLshwZOb
    Is it possible to move the caption slightly down to cover that bit?

    FYI, I am now aligning the captions to the left, and using the following code:

    /* Easy Slider Captions Alignment */
.avia-slideshow .avia-caption {
    left: 0;
    right: auto;
    bottom: 0;
    padding: 0;
}
    April 25, 2021 at 10:01 am #1296599
    Nikko

    Hi sitesme,

    Can you try adding this CSS code:

    #top .avia-caption .avia-caption-content p {
    margin: 0;
}

    Best regards,
    Nikko

    April 25, 2021 at 11:50 am #1296603
    sitesme

    Great job!

    Thank you Nikko and Rikard for this.

    Can you please tell me how to do the same for the Fullwidth slider? Align the caption box to the bottom left?

    Thank you

    April 26, 2021 at 1:51 pm #1296766
    Nikko

    Hi sitesme,

    We’re glad that we could help :)
    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    #top .avia-fullwidth-slider .av-slideshow-caption {
    left: 0;
    right: auto;
    bottom: 0;
    top: auto;
}

#top .avia-fullwidth-slider .caption_container {
    margin: 0;
    padding: 0 !important;
}

#top .avia-fullwidth-slider .slideshow_caption {
    position: static;
    padding: 0;
}

    Best regards,
    Nikko

    May 1, 2021 at 7:23 pm #1297737
    sitesme

    Hi Nikko

    Unfortunately, that didn’t work in the fullwidth slider element. Please check here how the caption is positioned: https://dns.d.pr/qtGHrJ/yL8Vs14eJr
    I would like it to be aligned to the bottom left of the image, as per the green rectangle mentioned in the screenshot.

    I removed the latest code and added the URL to the fullwidth slideshow in private.

    Appreciate it if you can help.

    May 3, 2021 at 5:10 am #1297841
    Nikko

    Hi sitesme,

    Can you try adding this CSS code:

    #top .avia-fullwidth-slider .caption_container {
    max-width: 100%;
    padding: 0;
}

#top .avia-fullwidth-slider .slideshow_caption, 
#top .avia-fullwidth-slider .slideshow_inner_caption, 
#top .avia-fullwidth-slider .slideshow_align_caption {
    padding: 0;
}

    Best regards,
    Nikko

    May 3, 2021 at 6:21 am #1297877
    sitesme

    Thank you Nikko.
    We are 98% there :)

    On desktops and mobiles, it is 99% done, properly aligned, but there is a tiny gap still there. Pls check the sshot https://dns.d.pr/83DDif/4x8JBxVQRm and the URL in private.

    The major problem remains on the mobile: https://dns.d.pr/qWqgf3/T6lbUjjCCP
    Not aligned to the left, and that small gap is also still there.

    Can you please check?

    May 3, 2021 at 6:49 am #1297897
    Nikko

    Hi sitesme,

    You’re welcome :)
    Can you try adding this CSS code:

    #top .avia-fullwidth-slider .slideshow_align_caption p {
    margin-bottom: 0;
}

    Best regards,
    Nikko

    May 3, 2021 at 6:55 am #1297903
    sitesme

    Thank you, Nikko.

    It is 100% fixed on desktop/tablet.

    However, nothing changed for mobiles (on both orientations). It is aligned to the bottom, but not to the left.

    May 3, 2021 at 7:08 am #1297914
    Nikko

    Hi sitesme,

    You’re welcome :)
    Can you try adding this CSS code to fix it in mobile:

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
  }
}

    Best regards,
    Nikko

    May 3, 2021 at 7:14 am #1297918
    sitesme

    Let’s cheer for Nikko, and Rikard.
    Hip hip… hooray!

    Thank you both. The captions alignments are all perfect now.

    May 3, 2021 at 8:28 am #1297932
    Nikko

    Hi sitesme,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Easy Slider Caption Alignments’ is closed to new replies.