• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Quick coding question - Using Wow Slider

Explorer ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

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

Views

136

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

 

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);
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

quote

 Does this make sense?


By @Taffypro

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

After rescaling image, you must refresh your browser window with F5 or Ctl+R.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

quote

After rescaling image, you must refresh your browser window with F5 or Ctl+R.

 


By @Nancy OShea

 

WOW does 'funny' things if you are testing it on a desktop browser and narrowing and widening the window.

 

I guess apart from us devs not many are going to be messing around doing that kind of stuff. However If you want the image caption nailed to the bottom of the slide then use the css I provided, that will do it!

 

WOW is just another, amongst too many, bloated hacky kind of overly dependent on javascript solutions in my opinion.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

LATEST

You get what you pay for. 😏

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines