Jump to content

natali5115

Member
  • Posts

    2
  • Joined

  • Last visited

Posts posted by natali5115

  1. 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;
    }

  2. Hi,

    Please help

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

    image.png.252bbcd803aec4f7d80d8ca6c9d8ac10.png

     

    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 noneimage.thumb.png.ce7599f3a6d7291f2ad967b4dc8cbb3d.png

     

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

×
×
  • 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.