Jump to content

Squarespace 7.0 Center text to match the others

Recommended Posts

  • Replies 2
  • Views 171
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

32 minutes ago, LindseyMexico14 said:

Site URL: https://www.koshersprings.com/adventures

Hi! I can't get Yard Games title in the gallery to match the others (centered and white text)


Any ideas? See screenshot!



Screen Shot 2022-06-16 at 12.50.56 PM.png




.slide:hover img {





   .slide:hover .image-slide-title {

      background: rgba(0,0,0,0.4);


.image-slide-title p {

    max-width: 90% !important;


.image-slide-title {

  white-space: initial !important;

  text-overflow: initial !important;

transform: translateY(-0.5em);

-webkit-transform: translateY(-0.5em);

-moz-transform: translateY(-0.5em);

-ms-transform: translateY(-0.5em);


  .slide .margin-wrapper { overflow: hidden !important;


.slide img {

      -webkit-backface-visibility: hidden;

      -moz-backface-visibility: hidden;

      -ms-backface-visibility: hidden;

      -webkit-transition: all ease-in-out 200ms;

      -moz-transition: all ease-in-out 200ms;

      transition: all ease-in-out 200ms;


    .image-slide-title {

      -webkit-transform-style: preserve-3d;

      -webkit-backface-visibility: hidden;

      -webkit-transition: all ease-in-out 200ms;

      -moz-transition: all ease-in-out 200ms;

      transition: all ease-in-out 200ms;

      height: 100%;

      box-sizing: border-box;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      width: 100%;

      position: absolute;

      top: 0;

      left: 0;

      background: rgba(0,0,0,0.2);

      display: block !important;


     .image-slide-title strong  {

            text-transform: uppercase;

            font-size: 26px!important;

            line-height: 28px;

        text-align: center;

            font-weight: 400;

            letter-spacing: 1px;

            color: #fff!important;

            position: absolute;

            top: 50% !important;

            left: 50% !important;

            -webkit-transform: translate(-50%, -50%);

            -ms-transform: translate(-50%, -50%);

            -moz-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);


      .image-slide-title p {

            font-style: initial;

            color: #eee;

            font-size: 12px;

            font-weight: 100;

            position: absolute;

            bottom: 20px !important;

            left: 50% !important;

            -webkit-transform: translate(-50%, 0%);

            -ms-transform: translate(-50%, 0%);

            -moz-transform: translate(-50%, 0%);

            transform: translate(-50%, 0%);



@media only screen and (max-width: 640px) {

.sqs-gallery-design-grid-slide {

  width: 100% !important;



@media ( max-width: 1024px ) {

  .slide .image-slide-title strong {

          font-size: 18px;

          line-height: 20px;


   .slide .image-slide-title span {

          font-size: 11px;

          line-height: 12px;



.sqs-lightbox-meta{display: none !important;}




Here is the code I found from a past developer but I cannot see how to apply it to the new photo I added yard games

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.