How to center-align text of a Slideshow overlay in Adirondack

Hi @natejmedia, 

Try adding this code to Design > Custom CSS:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
}

Thank you so much! That worked perfectly 🙂 Thanks, again! Any chance you might know how to also change the text font, color, weight, etc.? And lastly (and least importantly), what about that fade that the text sits on? Currently, it sits on a horizontal black bar that spans the image and starts and maybe 50% opacity at the bottom and goes to 0% opacity about 35 pixels or so upward. Great effect, but just looking to maybe charge the starting opacity at the bottom to maybe 70%. Or perhaps increase the height of the overlay bar. Thanks so much!! I can't tell you how much I appreciate it. 

Sure. For the font color, weight, etc. you can just add those lines in with the code above, so something like this:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
  font-size: 30px;
  color: #000000;
  font-weight: 700;
}

Changing the font, you'd add in a line for font-family: new-font;
You'd just want to make sure that font is actually loaded on the site.
 

For the opacity, this adjusts the starting opacity at the bottom to 70%:], but you can play around with the colors and percentages. There's different code for the different rendering engines (-ms is for Internet Explorer, etc.):

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(30,30,30,.7)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(30,30,30,.37) 100%);
}

Christy, THANK YOU so much!! I really appreciate it 🙂 I hope some day I can pay it forward!

This doesn't work for me! I have no idea what I am doing wrong, but I have tried everything, I can not get my Grid gallery block to centre-align the descriptions!

3 hours ago, Sharayah said:

This doesn't work for me! I have no idea what I am doing wrong, but I have tried everything, I can not get my Grid gallery block to centre-align the descriptions!

 

Can you share link to page where you inserted Gallery Grid? We can check easier.