natali5115

Since I used the text overlay on the Slideshow Reel Gallery and added captions, it created the dead space under controls location.

How would you minimize the gap between the slideshow reel gallery itself and the navigation (controls location)  button below?

The website is: https://www.internationalheritagefashionweek.com/

The code that I used: 

/* reel hover */

.gallery-caption {
    position: static;
}

/* title */
.gallery-caption-content {
    position: absolute;
    left: 10%;
    top: 92%;
    width: 80%;
    height: auto; /* Adjust the height to fit the content */
    max-width: 60%; /* Set a maximum width for the box */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    font-size: 1.1em !important;
    color: #ffff !important;
    font-weight: bold;
    background-color: rgba(67, 65, 66, 0.7); /* Light grey with some transparency */
    padding: 5px; /* Adjust as needed */
    border-radius: 5px; /* Optional for rounded corners */
}

.gallery-reel-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

/* overlay */
.gallery-reel-item a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-reel-item:hover a:after {
    opacity: 0.75;
}

.gallery-reel-item img {
    transition: all 0.2s ease;
}
.gallery-reel-item:hover img {
    transform: scale(1.3);
    transition: all 0.2s ease;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figcaption * {
    font-size: 10px !important;
    color: #ffff !important;
    font-weight: bold;
}

Hi,

Please help

I need to create a border around the text in Hero/Banner area as below

Added this code to the Custom CSS area for the text and to minimize banner area: 

#yui_3_17_2_1_1680460552639_568 {
  background: #D9D9D9;
  border: 1px solid #000;
  outline: 15px solid #eee;
  text-align: center;
  padding: 15px 10px;
  margin: 30px;
  box-sizing: border-box;
  width: 35%;
  float: right;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 768px) {
#yui_3_17_2_1_1680460552639_568 {
    width: 60%;
  }
}

@media only screen and (max-width: 480px) {
#yui_3_17_2_1_1680460552639_568 {
    width: 80%;
    margin: 25px;
    padding: 10px;
  }
}

.desc-wrapper {
  display: block;
  margin: 0 auto;
  padding: 0;
}

.6420b6bb62ab5e0e8ee566c5 {
  background: cover;
  max-height: 50%;
}

As soon  as I refresh the page, the box around of text resets to none

Link to the site: https://grey-herring-nf8k.squarespace.com/