Leanie

My site header randomly changed from what it used to look like and I am not able to change it back or edit it the top image is what it used to look like and the bottom one is what it looks like now with the red text squashed in the side. Here is the custom CSS currently used on my site. .Marquee * { color:black!important; } // SLIDESHOW GALLERY BEHIND HEADER NAV .gallery-section{padding-top:0px!important;} .gallery-fullscreen-slideshow-item-wrapper{ position: realtive!important} .gallery-fullscreen-slideshow-item-wrapper:after{ content: " "; display: block; background-image: url(https://static1.squarespace.com/static/65b7421ac1e2d52e89ab376c/t/65cf4950831994083c85b733/1708083537988/Sketch+logo+Web-02.png)!important; background-size: contain; position: absolute; width: 700px; height: 400px; top: 25%; left : 26%; } //mobile gallery// @media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{ position: realtive!important} .gallery-fullscreen-slideshow-item-wrapper:after{ content: " "; display: block; background-image: url(https://static1.squarespace.com/static/65b7421ac1e2d52e89ab376c/t/6710d20bb74a994362de58f6/1729155596884/scape+banner_web5-02.png)!important; background-size: contain; position: absolute; width: 550px; height: 220px; top: 30%; left: 5%; } } body.homepage header#header img { visibility: hidden; } /* hide burger */ .burger-inner { visibility: hidden; } section[data-section-id="65e032ddddd40d35894bd955"] .section-background img { position: fixed !important; } /* Fix footer */ footer#footer-sections { position: relative; z-index: 999999999999999; } //fugazzi home// /* Image hover */ section[data-section-id="65e032ddddd40d35894bd955"] div.image-block:hover img { transform: scale(1.3); transition: all 0.3s ease; } section[data-section-id="65e032ddddd40d35894bd955"] div.image-block img { transition: all 0.3s ease; } section[data-section-id="65e032ddddd40d35894bd955"] div.image-block:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); } section[data-section-id="65e032ddddd40d35894bd955"] div.image-block img { filter: grayscale(1); -webkit-filter: grayscale(1); } section[data-section-id="65e032ddddd40d35894bd955"] div.image-block.img { } section[data-section-id="65e032ddddd40d35894bd955"] div.image-block::hover img { filter: grayscale(0); -webkit-filter: grayscale(0); } //DROPDOWNN MENU// .header-nav-folder-content{background-color:#DDD7D3!important} .header-nav-folder-content a {border-bottom:2px solid #FFFFFF} .header-nav-folder-content a {padding-bottom:.4rem!important; } .header-nav-folder-content a {padding-top:.4rem!important; } .header-nav-folder-content a {color: #FFFFF!important;} .header-menu-nav-item a { font-size: 20px; text-align: left; padding-bottom:.8rem!important; padding-top:.8rem!important; border-bottom:2px solid #DDD7D3 } .header-nav-folder-item--active .header-nav-folder-item-content { background: none !important; } //NAVIGATION// .header-nav a:hover { font-weight: bold } #page { overflow-x:hidden } .gallery-grid-wrapper { display:flex !important; animation: slideshow 30s linear infinite } @media only screen and (min-width:768px) { .gallery-grid-wrapper .gallery-grid-item { min-width: 15%; margin-bottom: 3%; margin-top: 3% } @keyframes slideshow { 0% { left: 0; } 100% { left: -235%; } } } @media only screen and (max-width:767px) { .gallery-grid-wrapper .gallery-grid-item { min-width: 25%; margin-bottom:8%; margin-top: 8% } @keyframes slideshow { 0% { left: 0; } 100% { left: -425%; } } }

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 Screen Recording 2023-06-20 at 14.24.48.mov

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!

@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; } }