Leanie

Hi, Has anyone figured this issue out with the footer, have tried your code @tuanphan but it still shows the background image in the footer with the color as an overlay

Good day,

I would like to create a similar effect to the example below,
with a static logo with automatic images scrolling behind it

https://verhaal.studio/

Alternatively, with the images scrolling over the logo like below

https://www.elite-designstudio.com/

Is this possible in Squarespace?

@Beyondspace I am testing on google chrome. Screen recording attached

Hi, I am trying to create a pricing section with multiple accordion blocks, but for some reason, they are not all expanding.
If I click on one, the other ones are locked.  It also seems that the first expanded block doesn't close after being clicked on.

https://www.workshop17.co.za/pricing-test

@Wolfsilon Do you know how to do this in a social media content block?

@Ziggy sorry, here's the page

https://mouse-lizard-yzl6.squarespace.com/our-best-intentions

I just updated the pw settings as well

@Ziggy sorry, here's the page

https://mouse-lizard-yzl6.squarespace.com/our-best-intentions

@Ziggy https://mouse-lizard-yzl6.squarespace.com/  PW: vib2022

I have set up a list with advance praise quotes, this is for an author and I need the book title in italics in the quotes. Is there a way of doing this with custom css?

@tuanphan Thanks so much, that worked!

3 minutes ago, paul2009 said:

Check the parent element. If it has an overflow property set or has no height set then the sticky element won't have any area to stick to when scrolling. 

@paul2009 Thanks, I managed to get it to work, the only issue is that it's sticking to the left side of the site and I need it on the right with a bit of padding. Below is the code that ended up working to get it to this point

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 {
    position: fixed;
    top: 300; 
    position: -webkit-sticky;
    z-index: 999;
}
}

@semigrownkid @tuanphan have you managed to figure this out?

I have the same issue, trying to make the block in the screenshot sticky so it appears on the entire site as you scroll down.

Tried the below code but it does not seem to work

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

Hi,  has anyone solved this? I am looking to do a fixed navigation on the right like this

https://www.amazonicorestaurant.com/london/#top

@tuanphan I found this code, which ads the navigation to the left and turns the text 90 degrees,

but I want the text to remain horizontal but on the right side of the site as per the example I sent

// Vertical Navigation //

.header-nav-list {
  width: 135vh !important;
  padding: 25px;
  background: #000000;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}

Hi,  has anyone solved this? I am looking to do a fixed navigation on the right like this

https://www.amazonicorestaurant.com/london/#top

I would like to create a site similar to the reference below that has a full bleed background image that has a slideshow / carousel functionality. Is this at all possible?

https://www.amazonicorestaurant.com/london/#top

For those that are still struggling with this,

I found a very easy tutorial

@tuanphan how do you get the div#page-section to apply the vertical line to?

Site URL: https://dory-antelope-3w8g.squarespace.com

Hi There,

I have a carousel of logos and I would like to add a greyscale filter to them.

I created a list section and then chose a carousel option.

Is there any way to do this with custom CSS?

@creedon Thanks so much, that worked!

Hi There,
I have quite a bit of CSS code on my site and everything worked fine and then all of a sudden none of it shows up on my site. Here is the code:

//TOP NAVIGATION//
.header-nav-item a:hover {
    font-weight: 500!important;
}

//Drop Down Navigation//
.header-nav-folder-content{background-color:#a4c6ab!important;
text-align:left!important;
  font-size: 15px;
}
.header-nav-folder-content a {
padding-bottom:.1rem!important;
padding-top:.3rem!important;}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {color: #ffffff !important;}

//Drop Down Navigation MOBILE//

@media only screen and (max-width: 640px)
{
.header-menu-nav-folder-content {
  font-size: 10px!important;
  text-align:left!important;
  padding-left:.5rem!important;}
}

//Above the fold//
[data-section-id="618e31365856d72ef4181f1f"] .content-wrapper {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
}


//2nd home page section//
#block-80093575694f29df0263
{
background: #ede9e3;
padding: 40px;
text-align: left;
}

#block-yui_3_17_2_1_1643617675182_9684
{
background: #ede9e3;
padding: 40px;
text-align: left;
}
[data-section-id="61f7a0e715eb135ee257ac59"
.content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

//LOCATION SOLUTION CARDS//
[data-section-id="61a39fe6dfd0aa67845aaf2d"]{
  @media screen and (min-width:768px)}
  .design-layout-card .intrinsic {
    width: 15% !important;
}



//LOCATION HEADER TEXT BLOCK WEST  
#block-yui_3_17_2_1_1637496431053_6696
{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK FIRESTATION 
#block-7dcbc9ca22b6716b2273
{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK  BANK  
#block-c68cbb8d0871d3100486{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER BLOCK KLOOF
#block-2894f80e8f48f864f644{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK WATERSHED  
#block-41626d245953d6ac62fe{
background: #d67347;
padding: 40px;
text-align: center;
}
//LOCATION HEADER TEXT BLOCK TABAKHUIS  
#block-3d7b6632ad2b0e1838f2{
background: #d67347;
padding: 40px;
text-align: center;
}

//FORM FIELDS//
.field-element {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid !important;
border-color:#42454e !important;
  background: none !important;
}
.form-wrapper .field-list .field select {
    padding: 15px;
    border-radius: 0px;
    width: 100%;
  border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
  font-color:#59a370 !important
}

//HIDE PRICING TABLE FROM MOBILE/
@media screen and (max-width:767px) {
	[data-section-id="61f0f4383f658266e84fa2f2"] {
		display: none;
	}
}

//HIDE ACCORDIAN TABLE FROM DESKTOP/
@media screen and (min-width:768px) {
	[data-section-id="61f1440ab05c682781de7b17"] {
		display: none;
	}
}
/* accordion title background */
.sqs-block-accordion .accordion-item__title-wrapper {
    background-color: #b3d0b9;
}
/* accordion content background */
.sqs-block-accordion .accordion-item__dropdown--open {
    background-color: white;
}

#block-8bc4c71a67e281379f68
{padding: 0px;}

[data-section-id="61f0f4ea7f98de524c5ee3d0"].content-wrapper {
    padding-right: 0px !important;
}

Site: 
https://dory-antelope-3w8g.squarespace.com
Password: W172021

@tuanphan 

@tuanphan

https://dory-antelope-3w8g.squarespace.com/new-page-1

Password: W172021

@tuanphan see below

https://dory-antelope-3w8g.squarespace.com/new-page-1

@tuanphan I have implemented this code but now my text width seems to be very small, I would like it to extend a bit further on the page. Screenshot attached for reference

//LOCATION SOLUTION CARDS//
[data-section-id="61a39fe6dfd0aa67845aaf2d"]{
@media screen and (min-width:768px){
  .design-layout-card .intrinsic {
    width: 10% !important;
}
}
}

@media screen and (min-width:768px){
.image-card.sqs-dynamic-text-container {
 width: 90% !important;
      position: relative !important;
    left: -50% !important;
}
}