Michelle_Barra_

On 2/17/2024 at 8:54 PM, paul2009 said:

@Michelle_Barra_ You could fix the height of the page content but there are two things to note:

1. This will pull the footer up, making it much taller.
2. Mobile devices have many different screen resolutions, so it will look slightly different on each type (see examples below).

Here's some CSS that uses the Collection ID of the page you mentioned. I've also included some screenshots to show the effect this has on a test site with different mobile devices (using the same height value).

/* Set height of content */
@media screen and (max-width: 767px) {
  #collection-65c9b548a7a3934c9364c8e9 .page-section .content {
    height: 55vh;
  }
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks so much Paul.

For the record, I can't tell you how much appreciate all the work you do here.

@paul2009 thank you so much for clearing that up. It was driving me crazy! 
It makes sense now but I still do wish there was a way to reduce the size of the canvas for a slideshow without thumbnails. I don't suppose you know of any code that can do this?

Hi @tuanphan

I saw your solution above but it's not working for me, possibly because the CSS code is site dependent. I'd love your help if possible.

Same issue I think - huge white gap beneath the gallery block. I've made a screen recording of the issue here - https://share.descript.com/view/xbrAB7By9We but have also attached a screenshot.

The website is https://black-beetle.squarespace.com/ and the pw is blackbeetle24

Thanks so much

Michelle

I have this same issue. Massive space under the gallery in mobile view. 

Yes I had that problem. I ended up hiring the wonderful @creedon to help me with this workaround.

x.com is working for me! Thank goodness. That was becoming a bit of a pain for clients insisting on using the X logo! Thanks Squarespace 🙂

Hi @Alma_ugc26
Not sure if you found a solution yet, but check out this fantastic video from @inside_the_square who provides a code that works (thanks Becca!)
I just used it on a client website and it worked perfectly.

@qazwart I have replaced the Twitter feeds on two client websites using the Embed block as per these instructions. Very quick and simple - https://support.squarespace.com/hc/en-us/articles/206543317-Using-Twitter-with-Squarespace

Hello there.

You can safely delete the A record that starts with localhost (see my attached screenshot)

Then it should work.

Good luck!

14 hours ago, tuanphan said:

The url doesn't exist now

Oops sorry, accidentally deleted it. It's back now - https://www.ashleykalagianblunt.com/test

15 hours ago, tuanphan said:

Ah I forgot, they added image by using CSS background image code

@media only screen and (min-width: 768px) {
    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-left::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5b16640390167b71de4b/1659722518664/seven-skins-illustrations-1.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 650%;
        height: 650%;
        left: -6vw;
        top: -25vh;
        background-attachment: scroll;
        transition: .7s;
        transform: translatex(-20vw) rotate(35deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-left::before {
        width: 650%;
        height: 650%;
        transform: translatex(-40vw) rotate(0deg)
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .reveal-image-right::before {
        content: '';
        position: absolute;
        background-image: url(https://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.pnghttps://static1.squarespace.com/static/62182d7ba729412c22eb226f/t/62ed5be1640390167b720335/1659722721751/seven-skins-illustrations-2.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: 680%;
        height: 680%;
        top: -35vh;
        transition: .7s;
        transform: translatex(-30vw) rotate(-80deg);
        z-index: 2
    }

    section[data-section-id="6336933d79ad22a69786cf7b"] .animate.reveal-image-right::before {
        width: 700%;
        height: 700%;
        transform: translatex(-17vw) rotate(-40deg)
    }
}

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you so much @tuanphan 
I couldn't make it work, but that's very much user error on me! 
If you're curious which page I tried it on - https://www.ashleykalagianblunt.com/test
 

On 2/3/2023 at 2:25 PM, Michelle_Barra_ said:

Thank you so much @tuanphan You're a wonder!
So if I wanted to do the same on the flower images on the second section of this website https://ashley-kalagian-blunt.squarespace.com/ (password AKB2023) 
where do I put the image file names? Sorry, not 100% sure.....

Hi @tuanphan Just wondering if you would possibly help me customize the code you kindly provided for this website (see above)
Thank you!

14 hours ago, tuanphan said:

They added 2 Code Blocks, with this code on each Code Block

<div class="reveal-image-left animate"></div>

and

<div class="reveal-image-right animate"></div>

then use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".span-1,.reveal-image-left,.reveal-image-right");
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });
    elements.forEach((element) => {
        observer.observe(element);
    });
});
</script>

 

Thank you so much @tuanphan You're a wonder!
So if I wanted to do the same on the flower images on the second section of this website https://ashley-kalagian-blunt.squarespace.com/ (password AKB2023) 
where do I put the image file names? Sorry, not 100% sure.....

Hi all

Does anyone know how to recreate the effect on this website. About halfway down the flowers on each side of the book move to the side to reveal the book as you scroll.

https://hollyringland.com/

It's definitely a Squarespace site but I have no clue how the designer managed this effect.

Thoughts?

Thanks!

Michelle

On 10/19/2021 at 9:34 PM, paul2009 said:

If you take a look at Squarewebsites you'll find a great product called the Tools Extension PRO that can take of this. 

I'm just about to quote a job that has hundreds of blog posts. Very keen to try this extension, thanks Paul 🙂 Looks like a game changer!

On 3/22/2022 at 12:57 AM, tuanphan said:

Add to Design > Custom CSS

/* Increase logo size - Make nav items on one line */
.header-title-nav-wrapper {
    flex: 0 0 100% !important; /* default is 50% */
}

 

Tuan, you are a legend. Thank you!

@tuanphan How are you Tuan? Just wondering if you have one of your magical codes in your bag of tricks for this one?

Hello everyone

I would like to increase the size of the logo on this website when it is in the centered position (with navigation underneath). I have gone into the header settings and increased the logo size to its maximum but it won't go any bigger. The image is 2000px wide so it's nothing to do with the image size. I think it must be the padding in the header around the logo....?

If anyone has some CSS code for this, I'd be grateful. I tried some earlier that worked but it threw the navigation alignment off center.

The attached image shows the actual logo size (at its maximum) above the navigation menu. I have put the preferred logo size in a new section underneath just to demonstrate the size I want it.

Thank you!

Michelle

PS. The URL is https://emmapignatiello.squarespace.com/  Password is 2022. The site is still in trial. Only just started the build.

On 7/29/2019 at 9:59 PM, tuanphan said:

@StephenWise1999 Add to Home > Design > Custom CSS

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #febf00 !important;
}

 

 

@tuanphanyou are literally the best! I have used so many of your CSS snippets. A million thank yous!

I imported a client's blog from Wordpress and all the posts came across, however the post summaries (thumbnails, excerpts, etc) did not appear on the main blog page. I could see the list of posts in the editor on the left but they weren't appearing on the blog page itself. I had migrated blogs from Wordpress several times in the past and had never encountered this issue before. I've attached a screenshot of the problem.

Thanks to Faye S from Squarespace Customer Care, I solved it by creating a new blog page and moving the posts to the new blog page. The new blog page populated as normal with the blog post summaries (thumbnails, excerpts, etc)

I used this support page to learn how to move collections - Move Collection Items (first create new blog page)

Hopefully this helps others who encounter the same problem. 🙂

Adding my request to delete/manage images to the crowd of Squarespace designers needing this feature. Would love a response on timing for this feature please!

Michelle 🙂