Gallery Slideshow Description Position

Hello, I am working on designing my gallery slideshow into somewhat of a "module" using some custom CSS. The goal is to have site visitors click on a thumbnail and see the description of the image. I have gotten pretty close to my desired outcome. Here's what I've done so far:

1. Hid the main (big) image so only the thumbnails and image description are visible.
2. Designed the image thumbnails and moved them to the left of the main (big) image.
3. Designed the image description and moved it to the right of the thumbnails.

But I am running into a hiccup; see below and attached screencast.

When I first click on a thumbnail the description appears at the very top (beyond the margin actually). Then, when I click on that same thumbnail again (after clicking on a different thumbnail first) the description loads in the correct position (vertically centered with the thumbnails). How can I keep the image description from initially loading beyond the top margin? I want to be able to click on a thumbnail for the first time and the description appears vertically centered in the correct position.

Here is my code:

#block-yui_3_17_2_1_1709700216968_1936 {
  //hide main image
	.thumb-image {
    visibility:hidden;
    background-color:white!important;
  }
  
  // description
    .sqs-gallery-design-stacked-slide {
    z-index:1;
    padding-top:10px!important;
    padding-bottom: 10px!important;
  }
  .sqs-gallery-block-slideshow .meta {
    position: inherit!important;
    top: 0 !important;
    left: 50% !important;
    background-color: white!important;
    overflow: visible!important;
    min-width: 40% !important;
    max-width: 80px;
    margin-left: -75px!important;
    pointer-events: none;
  }
   .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{
    color:black!important;
    font-size: 24px;
    line-height:1.2em
  }
  .meta-title {
    color:#990000!important;
    font-family: 'Violine'!important;
    font-size: 40px;
    line-height:2em
  }
  .sqs-gallery-block-slideshow {
    pointer-events: none;
  }
  
  
  // thumbnails look
  .sqs-gallery-design-strip-slide {
    opacity: 1!important;
    margin-right: 10px;
    margin-left: 10px;
    border: 5px solid white!important;
    border-radius: 50%;
  }
.sqs-gallery-design-strip-slide:hover {
    background-color:#e7e6e6!important
  }
.sqs-gallery-design-strip-slide.sqs-active-slide {
  background-color:#e7e6e6!important;
  border: 5px solid black!important;
  border-radius: 50%;
  padding: 2px!important
  }
  
  
  //thumbnails position
 .sqs-gallery-design-strip .sqs-wrapper {
    width: 200% !important;
    left: 50% !important;
  	top:-75%!important;
    display: flex;
    flex-wrap: wrap;
  }
  .sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide {
    width: 20% !important;
  }
  .sqs-gallery-design-stacked {
    position: static;
    text-align: left;
    height: 100px !important;
  }
  .sqs-gallery-design-strip {
    overflow: visible !important;
  	width:20%!important;
    z-index:9998!important;
    margin-bottom: 30px!important
  }
} 

Here is the link the to screencast: https://www.loom.com/share/2d3037425e414b6db57690f9feb1e2c7?sid=085158a3-8a70-4bf6-839a-cd701598df2b

Here is the attachment of the screencast: Screen Recording 2024-03-06 at 11.18.05 AM.mov

So you want click Left Image >> Show text on right? Can you share link to page in screenshot?

Or you can also use this approach, in my guide, I used Video, and Buttons, but you can repeat same with Image and Text

On 3/9/2024 at 3:23 AM, tuanphan said:

So you want click Left Image >> Show text on right? Can you share link to page in screenshot?

Or you can also use this approach, in my guide, I used Video, and Buttons, but you can repeat same with Image and Text

 

Correct! I think I figured it out for desktop view. On mobile it is still looks horrible, so I've replaced it with a different version.  Here is the link to the page (see the "core values" section).
https://www.theenrichededucator.com/aboutus

If you can help me figure out how to keep the circle images on the left from changing positions when the screen adjusts to a smaller width, that would be really helpful! Ideally, I'd like to keep the images displayed 2X2 regardless of the screen width.

Here's my updated code:

//Core Values Module - desktop//
#block-yui_3_17_2_1_1709813932004_17418 {
  //description formatting
  .sqs-gallery-block-slideshow .meta {
    background-color: transparent!important;
    pointer-events: none;
    width:200%!important;
    overflow: visible !important;
    display:block!important
  }
  .sqs-gallery-block-slideshow .meta-inside {
    padding: 0px!important;
}
   .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{
    color:black!important;
    font-size: 18px!important;
     line-height:1.2em!important
  }
  .meta-title {
    color:#990000!important;
    font-family: 'Violine'!important;
    font-size: 30px;
    line-height:1.2em
  }
//make description non-click
  .sqs-gallery-block-slideshow {
    pointer-events: none;
  }
 //main image
  .sqs-gallery-design-stacked-slide img{
    opacity:0!important
}
//gallery container position and style
  .sqs-gallery-design-stacked {
  display: flex;
    height:300px!important;
    background-color:white!important;
}
.sqs-gallery-design-stacked-slide {
  order: 1;
  width: 100%;
  height: 100%;
  margin-left: 40%;
}
  .sqs-wrapper {
    position:static;
    overflow:visible!important;
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    
  }
//thumbnails positioning
  .sqs-gallery-design-strip {
    margin-left: 0;
    max-width: 70%;
    position: absolute;
    height: 100%;
    top: 0 !important;
    overflow:visible!important;
    display: flex;
    flex-wrap: wrap;
}
.sqs-gallery-design-strip-slide {
  margin-left: 0;
  width: 100%;
}
// thumbnails style
  .sqs-gallery-design-strip-slide {
    opacity: 1!important;
    margin-right: 10px;
    margin-left: 10px;
    border: 5px solid white!important;
    border-radius: 50%;
}
.sqs-gallery-design-strip-slide:hover {
    background-color:#e7e6e6!important
  }
.sqs-gallery-design-strip-slide.sqs-active-slide {
  background-color:#e7e6e6!important;
  border: 5px solid black!important;
  border-radius: 50%;
  padding: 2px!important
  }
}