Fixing issues with on-hover alignment of image gallery squares. I'm so close!

Site URL: https://dalmatian-celery-kg9s.squarespace.com/

I feel like I'm sooo close to having made it on my own, but things start breaking when I change the size of the screen or it goes to mobile. I'd love your help with the last 5% to make this work as intended. Let me know if I need to provide you with anything else to help me fix this issue. Thanks in advance!

A link to my site: https://dalmatian-celery-kg9s.squarespace.com/

All the CSS on my site (in case there's anything rogue causing the problem) The problem area is sandwiched between the //***** asterisks.

// Stretchy Navigation Line - v2 //
.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 3px; //thickness
  width: 0;
  left: 0% !important;
  display: block;
  margin-top: -6px !important;
  transition: width .3s ease; //animation speed
}

.header-nav-item:hover::after {
  width: 100%;
  left: 0%;
}

.header-nav-item--active a {
    background-image: none !important;
}

//----------

//nav font size
.header-nav *, nav.header-menu-nav-list * {
    font-weight: 600 !important;
  font-size:20px !important;
}

//----------

//Fill in the ______ .
#block-e75c0a1dc83d65e3397f h1 {
  color: #333 !important;
}

//----------

/* button color on homepage */
#block-c3cc3a982f96f9d0bc98 .sqs-block-button-element--large {   
   background-color: #333333 !important;     color: #fff !important;
   }

#block-02f3fb585d8f3cfe4f9a .sqs-block-button-element--large {   
   background-color: #333333 !important;     color: #fff !important;
   }

.sqs-block-button-element--large:hover {
}

//----------

// Explore all spaces.
@media screen and (max-width:767px) { #block-yui_3_17_2_1_1617326928011_18823 h1 { 
  color: #fff !important;
  text-align: left !important;
  padding-left: 0px !important;
  }}
@media screen and (max-width:767px) { #block-c3cc3a982f96f9d0bc98 .sqs-block-button-element--large {
  color: #fff !important;
  margin-top: -25% !important;
  margin-left: 0% !important;
  }}

//**********

//----------------------------
//Spaces gallery on:hover
.gallery-caption {
    position: absolute !important;
    transform: translate(0%, -24%) !important;
    width: 33.333% !important;
     height: 100% !important;
    text-align:center !important;
    opacity: 0 !important;
    transition: all .3s ease !important;
    background-color: #FF4949 !important;
  margin-bottom: 0% !important;
  pointer-events: none !important;
}

.gallery-grid-item:hover .gallery-caption {
    opacity: 1 !important;
    transition: all .3s ease !important;
}

.gallery-caption-wrapper {
    display: flex !important;
    place-items: center !important;
    justify-content: center !important;
      height: 20% !important;
}

 .gallery-caption p {
   font-family: proxima-nova-n9, proxima-nova, sans-serif;
   font-size: 18px !important;
   font-weight: 900 !important;
   color: #fff !important; 
   letter-spacing: 2px !important;
   opacity: 1 !important;
   width: 50% !important;
}
//-------------------------

//************

// Discover all things.
@media screen and (max-width:767px) { #block-348cd381a1bd7ba15f8b h1 { 
  color: #fff !important;
  text-align: left !important;
  padding-left: 0px !important;
  }}
@media screen and (max-width:767px) { #block-02f3fb585d8f3cfe4f9a .sqs-block-button-element--large {
  color: #fff !important;
  margin-top: -25% !important;
  margin-left: 0% !important;
  }}
    

//spacing above calendar
#block-70dd82cc2e90c5f3fb4b {
  margin-bottom: -5% !important;
  margin-top: 3% !important;
}

// CHECK THIS DOESN'T BFREAK LANDSCAPE
// Small devices (landscape phones, less than 768px)
@media screen and (max-width: 767.98px) {
.gallery-grid-wrapper {
   grid-template-columns: repeat(1, 100%) !important;
}
}

Hi. What is your problem? can you explain clearly?

Hey! I sent you an email earlier. I would still love your help. The hover overlay on the gallery images is supposed to be the same width as the image and half the height on both mobile and desktop. Not sure how to fix this. Thank you!

Desktop:

Mobile:

The desktop looks fine here. Which screen size/browser do you use?

With mobile, add this to Design > Custom CSS

/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-caption-wrapper {
    height: 100% !important;
    place-items: unset !important;
    justify-content: unset !important;
    text-align: center !important;
    align-items: center !important;
}
.gallery-caption p.gallery-caption-content {
    width: 100% !important;
    text-align: center !important;
}
figure {
    position: relative !important;
}
figcaption.gallery-caption.gallery-caption-grid-simple {
    width: 100% !important;
    transform: unset !important;
    bottom: 0 !important;
    top: unset;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: unset !important;
    height: 50% !important;
}
}

On 4/24/2021 at 6:24 AM, tuanphan said:

The desktop looks fine here. Which screen size/browser do you use?

With mobile, add this to Design > Custom CSS

/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-caption-wrapper {
    height: 100% !important;
    place-items: unset !important;
    justify-content: unset !important;
    text-align: center !important;
    align-items: center !important;
}
.gallery-caption p.gallery-caption-content {
    width: 100% !important;
    text-align: center !important;
}
figure {
    position: relative !important;
}
figcaption.gallery-caption.gallery-caption-grid-simple {
    width: 100% !important;
    transform: unset !important;
    bottom: 0 !important;
    top: unset;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: unset !important;
    height: 50% !important;
}
}

Thanks @tuanphan

That fixed my mobile issues perfectly! Thank you!

For the desktop issue, I have a MacBook Pro with 4096x2560. As you can see in the screenshot it doesn't cover the entire width.

@tuanphan and for some reason none of my caption overlay settings are translating to my second gallery section. They are are only working for the first gallery. I'd love your help figuring that out as well. Thank you!

On 5/1/2021 at 4:04 AM, AldenCreative said:

@tuanphan and for some reason none of my caption overlay settings are translating to my second gallery section. They are are only working for the first gallery. I'd love your help figuring that out as well. Thank you!

Add this CSS

/* Fullwidth caption */
figcaption.gallery-caption.gallery-caption-grid-simple {
    max-width: 100% !Important;
}

@tuanphan Thank you so much!!! That fixed it. I'm grateful for your help. :)