How make slide title boxes consistent?

  • I was called in to help with a site that is mostly built. Our carousel needs to have a semi-transparent blue box along the bottom portion of the slide photo, with left-aligned reverse/white text, and two action buttons to the right. It’s mostly done except for three things:
    1-The blue box only bottom-aligns in the first slide. The others have a gap at the bottom. When I go into the FSE, I can only see the first slide.
    2-Each slide seems to have its own version of the blue box and contents. I wish this box and contents would stay in place while the images underneath continued to slide past.
    3-The entire carousel does not scale down on mobile devices like a phone (vertical).

    I haven’t yet added a link because I have to get permission at a meeting today 7/30 at 2pm CST.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author David Jensen

    (@dkjensen)

    Are you able to paste the CSS you are using to try and accomplish this? Based on your description, I would probably do the following:

    1. Add an image block inside each slide, and a “Row” (Group) block below.
    2. In the Row block, add your blue background color, and inside add your text and buttons to the right (set justification space between)
    3. Add a CSS class to the Row block, e.g. .slide-content
    4. Add custom CSS for the .slide-content Row, something like the following:
    .slide-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
    }

    You may need to make the .splide__slide position: relative.

    This will put the blue Row at the bottom of each slide.

    If you do not want the blue Row to be repeated for each slide, or live outside the carousel, you could position it below the carousel block and then use CSS to offset it to overlay on top of the carousel.

    The plugin does include basic options for responsiveness if you are using the slides per page feature, but more advanced features you will need to toggle the “Advanced” tab panel on the Carousel block itself, which will expose a field where you can paste in custom Splide JSON options, specifically breakpoint options:

    https://splidejs.com/guides/options/#breakpoints

    Hope this helps, and if you are able to share the link later that would also help ??

    Thread Starter okieman

    (@okieman)

    That’s interesting. I have the meeting coming up, and will come back here afterwards…

    Thread Starter okieman

    (@okieman)

    @dkjensen sorry for the delay. We decided most of our problems on this site are probably due to damage to files during or shortly after the original theme install.
    Once we get that cleared up, I can come back to work on tweaking the carousel appearance.

    Plugin Author David Jensen

    (@dkjensen)

    @okieman No problem!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.