How to overlay image title on image in gallery block SS 7.0

Site URL: https://walrus-springtail-ljhd.squarespace.com/

Hi,

I am trying to add titles overlaid on gallery block images (ideally h1) with a shadow behind.  I've had a bash with following which appears to work while adding the css but is wiped out once saved.  Can anyone please help? Password: 1mageproblem Would be forever grateful.

thanks

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper {
  position: relative !important;
  text-align: center!important;
  color: white !important;

}
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title  {
  height: 60px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%)!important;
 
  font-size: 45px !important;
  background: rgba(0, 0, 0, 0.3)!important;
  color: #f1f1f1 !important;
}

It looks like you solved with this code?

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    height: 40px !important;
    position: absolute !important;
    padding-top: 20px;
    padding-bottom: 20px;
    top: 42% !important;
    left: 50%;
    transform: translate(-50%,-50%) !important;
    font-size: 5.6vw !important;
    text-shadow: 5px 5px 6px #000 !important;
}

I did thank you.  It appeared not to be holding yesterday, but today it seems to be working fine. 🙂

However, I still have one problem, I need to get the gallery grid to display one column wide on mobiles (rather than 2 on desktop).  I've tried the code in your post on this and hunted to find how this is set but haven't managed to crack it.  Any help would be very much appreciated.

Thanks

Niki

On 6/14/2022 at 4:05 PM, Ladybird said:

I did thank you.  It appeared not to be holding yesterday, but today it seems to be working fine. 🙂

However, I still have one problem, I need to get the gallery grid to display one column wide on mobiles (rather than 2 on desktop).  I've tried the code in your post on this and hunted to find how this is set but haven't managed to crack it.  Any help would be very much appreciated.

Thanks

Niki

 

Add to Design > Custom CSS > then save & reload the site

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1655111887131_8634 .slide {
    width: 100% !important;
}
}

Thank you both 🙂 This is exactly what I was looking for.