Jump to content

AmalieHoffding

Circle Member
  • Posts

    1
  • Joined

  • Last visited

AmalieHoffding's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. Hi @tuanphan I am trying to achieve a similar concept to ysong. I've got a Reel Gallery, where I want the caption to appear on hover, with a clickthrough to another page, and the arrows beneath the gallery. I have managed to achieve almost all of the above - except that when the gallery arrows are located "Below Center", and captions are on, there is a huge blank space beneath the gallery, where the captions go. Even with my CSS that places the caption on top of the image, that spacing does not disappear. I've looked all over the forums for some CSS that will solve this, but I've had no luck. This is the issue before I add any CSS. So this is the 'standard' situation for Reels + Captions + arrows Below Center: This is what is looks like now that I've edited the arrows and the captions with CSS: It seems that this issue only appears when the arrows are placed "Below Center" - it's not an issue when the arrows are on the sides. However, I really want the arrows to be centred beneath the image (as seen in the image above). Website link is https://www.lipsticklens.com/ (it's near the top of the homepage). Existing CSS looks like this: /*HOMEPAGE - SLIDESHOW */ /*remove arrow background*/ .gallery-reel-control-btn::before{ background-color:#3E1821;} /*change arrow colour*/ .gallery-reel-control-btn { color:#D0A658;} /*change caption placement + hover*/ .gallery-caption { margin-top: -22%; opacity:0!important; transition-duration:0.3s} 
/*hover effect*/ .gallery-reel-item:hover .gallery-caption { opacity:1!important; transition-duration:0.3s} /*caption font*/ .gallery-reel-list p.gallery-caption-content { font-size: 3em !important; font-family: Goldenbook;} I found this code in one of your other forum answers, but unfortunately it does not help - in fact, the arrows just end up overflowing/floating down into the section below: .homepage .gallery-reel[data-show-captions="true"][data-width="full-bleed"] { margin-bottom: 0px !important; } I hope you can help @tuanphan! This is my first time asking a question, as normally I've been able to find everything I need to know through your incredibly helpful forum answers. You're an absolute star!! 🤩
×
×
  • 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.