StudioFC
-
Posts
11 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by StudioFC
-
-
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;
} -
-
That's awesome! The site header now disappears on mobile, but desktop looks great!!!!
-
-
-
Vertical Tabs with list-items (need button to sit at bottom of text)
in Customize with code
Posted
@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!