StudioFC

@tuanphan I'm working on the same thing on this site. I have managed to get the button to sit at the bottom of the container (so it's kind of floating in mid air), but I would still prefer for it to sit at the bottom of the text if it has to scroll.

https://parrotfish-spinach-nwzs.squarespace.com/?password=demo

Thank you for your help!

Did you ever find a solution to this? I'm also having issues.

https://cello-badger-a8a3.squarespace.com/?password=demo

I've created Vertical Tabs using a .user-items-list-section

It's pretty much working as expected EXCEPT for the button. How can I get the button to sit at the bottom of the text?

This is my code thus far.

/* list container */
ul.user-items-list-item-container.user-items-list-simple {
    display: flex;
      grid-gap: 0 !important;
    padding:0;
      width: 100%;
}
li.list-item {
  width: 0% !important;
  cursor: pointer;
}

/* *** title *** */
.list-item-content__title {
    writing-mode: vertical-rl;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: end;
    width: 40px;
    transform: rotate(180deg);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* hidden content */
li.list-item {
    height: 375px !important;
    padding:3% !important;
    webkit-transition: 0.8s;
     -o-transition: 0.8s;
    transition: 0.8s;
    position: relative;
    overflow: hidden;
    list-style: none;
}
/* description */
.list-item-content__description {
    background: @light1;
      text-align: left !important;
      overflow: scroll;
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
      margin-top: 0 !important;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
  
/* button */
.list-item-content__button-container {
    background: blue;
      text-align: left !important;
      overflow: scroll;
    width: 85%;
    height: 20%;
    position: absolute;
    left: 40%;
    top: 0px;
      margin-top: 0 !important;
    opacity: 1;
    padding:10px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* *** active tab *** */
li.list-item.active {
    width: 100% !important;
}
li.list-item.active .list-item-content__description {
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

li.list-item.active .list-item-content__title {
    left:25px;
    right:auto;
    margin:0;
}

Thank you!

If you want to target these 2 items specifically, then you can use the below code.

div#yui_3_17_2_1_1684346865743_69, div#yui_3_17_2_1_1684346865743_95 {
    border: 2px solid #000;

}

If you want to add it to any and all images on the site, then you can use this...

.sqs-image-content {

   border: 2px solid #000;

}

If you want it across the entire site, remove the collection id's. It should just be the h1, h2, h3, h4 without any other selectors.

Can someone please help me with this CSS. The higher the border-radius I set, the worse the border gets clipped.

.sqs-image .sqs-image-content {
    border-width: 6px;
    box-sizing: border-box;
    border-style: solid;
      border-radius: 95px 95px 0 0;
    border-style: solid;
    border-image: linear-gradient(to right, @accent1, @accent2) 1;
}

Hurray! Thank you so so so much!!!

That's awesome! The site header now disappears on mobile, but desktop looks great!!!!

Thanks! I've added that code. I really appreciate your help!

https://mushroom-caterpillar-yw24.squarespace.com/

password = demo

Thank you!

Can someone please help me customize the navigation links to appear as shown in the screenshot? I've tried a billion different things and just keep making things worse.

Thank you!