Menu icon Foundation
Centering captions and scaling the fullscreen slider

After I added the fullscreen sllder code from Foundation's Building Blocks, my captions wouldn't center and instead went to the bottom-left corner.  

I was able to get them to center by changing the padding in .orbit-caption to 19.75% when displaying as a desktop site. However, this doesn't remain centered when scaled to smaller screens.  

How do you get the captions to center when the screen scales responsively?  I tried various options, but don't know if it should be done using media queries, or with a different command on the .orbit-caption selector.

 

Thanks in advance for your help,

Steve

fullscreen sliderbuilding blocks.orbit-caption

After I added the fullscreen sllder code from Foundation's Building Blocks, my captions wouldn't center and instead went to the bottom-left corner.  

I was able to get them to center by changing the padding in .orbit-caption to 19.75% when displaying as a desktop site. However, this doesn't remain centered when scaled to smaller screens.  

How do you get the captions to center when the screen scales responsively?  I tried various options, but don't know if it should be done using media queries, or with a different command on the .orbit-caption selector.

 

Thanks in advance for your help,

Steve

Rafi Benkual about 2 years ago

Can you post the example code here? Maybe a codepen?

Steve Juliusson about 2 years ago

Here's the codepen:

https://codepen.io/sjuliusson/post/zurb-foundation-6-fullscreen-slider-captions-not-vertically-centering

Humberto Roberts about 2 years ago

Thank you for sharing. Latest Vidmate App 

Steve Juliusson about 2 years ago

Really? 

You're sending junk mail about your video app to a post about a problem I'm having with Foundation?