Skip to main content
T
Taffypro
Known Participant
March 10, 2022
Question

Quick coding question - Using Wow Slider

  • March 10, 2022
  • 1 reply
  • 321 views

I’ve created a slide show in WowSlider. The Titles/Captions for their slide shows have limited options. When you export the .html files it also creates a CSS page. I’ve been able to adjust the captions but I cannot figure out one thing. I want the caption to appear centered at the bottom of each slide. I have used the “bottom: 32px;” code to adjust this, but it’s kinda hit or miss.

 

Here is a link to the website:
http://taffyproductions.com/test/kauai.html

 

Here is the relevant CSS code:

#wowslider-container1 .ws-title{
font: 1em 'Tenor Sans', Arial, Helvetica, sans-serif;
position: relative;
margin: auto;
z-index: 50;
background: none;
background-color:#1A2223;
color:#ffffff;
padding: .8em;
width: 26%;
text-align: center;
bottom: 32px;
opacity: 1;
}
#wowslider-container1 .ws-title div{
display:block;
margin-top:0.1em;
font-size: 1.3em;
line-height: 1.15em;
}

 

Thanks for your help

    This topic has been closed for replies.

    1 reply

    O
    osgood_
    Legend
    March 10, 2022

     

    quote

    I want the caption to appear centered at the bottom of each slide. 


    By @Taffypro


    The caption looks centered to me?

     

    Maybe you mean you want the caption div to sit flush with the bottom of each slider image?

     

    Try the below css:

     

    #wowslider-container1 {
    position: relative;
    }

    #wowslider-container1 .ws-title{
    font: 1em 'Tenor Sans', Arial, Helvetica, sans-serif;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    }

      T
      TaffyproAuthor
      Known Participant
      March 10, 2022

      I guess I wasn't clear with my question.  I figured out how to center it but I want it to stick to the bottom of the photo.  For example if you look at it on a computer it looks somewhat normal. However if you look at it on a mobile device it jumps up a bit (doesn't lock to the bottom of the photo)  Does this make sense?

       

      Thanks again!

       

      Gary

      O
      osgood_
      Legend
      March 10, 2022
      quote

       Does this make sense?


      By @Taffypro

       

       

      Yes, try the css solution I provided in my post above - that should work in all devices.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices