Vigasan

27 minutes ago, MrY-Z said:

Thank you for your reply @Vigasan , I will check the website.

And how about the the posters flip effect with text?

For the flip effect, there's some great free code here: https://codemyui.com/3d-card-flip-hovering-text/

28 minutes ago, Josh-KJM said:

@Vigasan is that difficult code to implement to get it to recognize a programed font as something else? Or should I not really worry about being able to choose a font to change since the CSS code is already doing all the work? I'm just thinking through usability for some of my team that will be working the site as well and that if somethign got changed by accident or something it woud be easy for them to click the font back that they want.

Any thoughts on that?

When you pick a font, it doesn't add any unique identifiers to classes, so it would be difficult to target elements that have specific fonts assigned.

I'm fairly sure this won't work on 7.1, but you can give it a shot (I haven't tried yet).
https://www.squarewebsites.org/blog/how-to-add-custom-fonts-to-squarespace-site

2 minutes ago, Josh-KJM said:

@Vigasan thanks for that reply. So am I correct in assuming there isn't a way to add a new font that will show up in places you normally select fonts? Thank you for your kindness in your response. Stepping into some new territory with this. Got kind of assigned a job outside my current skillset.

Yes, that's correct, there was a way on Squarespace 7 (not 7.1) with a lot of code, but it wasn't worth the hassle in my opinion. So for custom fonts, you'll have to right click the text you want to assign a font too, find a class name, and then use CSS to target that class and assign it the font you want.

You can try this code, it's working when I test it.

footer{
    display: none !important;
}

.page-section.section-height--small:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
    min-height: 100vh !important;
}

When you add custom fonts with code, it won't show up in places where you select fonts, you have to use CSS to assign the font manually (like the last line of your code).

That's not going to be just CSS, you'll need to use JS to see how far down a user has scrolled, and then change that specific anchor link color in the menu. In Squarespace 7, some templates could do this as single-page websites but in 7.1 it'll take code. Many jQuery libraries will let you detect when a user is on a specific section (instead of using offset) which will make the code easier to write.

Here's a good starting point: https://stackabuse.com/bytes/check-element-visibility-after-scrolling-with-jquery-or-js/

16 hours ago, saymycheese said:

Everything is closed properly and I couldn't find any errors. I don't think the height is the issue - all custom CSS codes are not working.

If all code isn't working, it most likely means an unclosed bracket is somewhere. You can try pasting your code into something like ChatGPT and asking to debug for you.

3 minutes ago, saymycheese said:

Hi,

I'm having some issues with custom CSS.

• Fonts: I uploaded a custom font for headings - it shows up in the editor but none of them shows up on the live site.
• Other CSS: The CSS I wrote for the yellow nav bar also does not appear on the live site even though it works in the editor.

I was troubleshooting but couldn't get this resolved. The live site is https://www.saymycheese.com/simply-sage - would appreciate some help, thanks in advance!

 

@font-face {
  font-family: 'Jost';
  src: url('https://static1.squarespace.com/static/627b2b8d29670e0040a5311f/t/6530c8f1a2891e484b1cad0f/1697695985126/Jost-SemiBold.ttf');
}

.header {
  font-family: 'Jost' !important;
}

.case_header {
  font-family: 'Jost' !important;
  font-size: 2.5em;
}

.case_info {
  font-family: 'Jost' !important;
  font-size: 1.5em;
}

.case_section {
  font-family: 'Jost' !important;
  font-size: 2em;
}

#block-yui_3_17_2_1_1697821516021_9785{
  position: fixed;
  top: 0;
}

The nav bar code you're using has a height set of 100%, so it's covering the entire screen vertically. I'm sure there are errors in the code used for that but I can't debug since I don't have access to the site. Take a look at your code and make sure everything is closed properly.

6 hours ago, Linnxh said:

Hi!
 

I have this section on this website I'm building for a client, with somewhat long client names. When I scale the browser, some letters wrap individually, which makes it hard to read the names. I'm trying to find out a code snippet to use to prevent this from happening, or at least a way to hyphenate the words in a natural place so it looks better. 

For example see the 6th name on the most left list "Everett Aviation (Charter) Limited, where the "d" in Limited is on a separate line.

Thank you in advance for the help!

Right now your text is copied and pasted from a document, so instead of a space, it's using " ". You can fix this by either manually typing the text out, or you can also try highlighting all the text and try clicking REMOVE FORMATTING.

So what you're asking for wouldn't be possible with just custom CSS. There's a lot of functionality behind how the navigation itself works. You can try using Javascript to append the navigation to the header title instead, but you'd have to use Javascript to also change the text itself. 

Do you mean space above and below? There's some margin on the H1 but I would leave that, instead, you can try clicking and dragging the bottom edge of the CODE BLOCK itself so that it's vertically smaller.

2 minutes ago, SMConsult said:

Hi Ziggy, 

Thanks for the reply. I have actually inherited the site so it wasn't me who originally set it up. After speaking with the support I have been told it's via CSS. 

I found the following code under Website > Website Tools > Code Inject. I am fairly certain this is relevant code as it's posted in the footer section. I am however not sure where I can edit which info is shown when the accordion is expanded vs closed.
 

<script type="text/javascript">
    if(jQuery( window ).width() < 768){
        $('.fe-block-aeaa291a50cfb746b08c').find('p.sqsrte-small:nth-child(2)').hide();
        $('.fe-block-aeaa291a50cfb746b08c .sqs-block-content strong').click(function(){
            $('.fe-block-aeaa291a50cfb746b08c').find('p.sqsrte-small:nth-child(2)').toggle();
        })

        $('.fe-block-1a523a3d869699d390b0').find('p.sqsrte-small:nth-child(2)').hide();
        $('.fe-block-1a523a3d869699d390b0 .sqs-block-content strong').click(function(){
            $('.fe-block-1a523a3d869699d390b0').find('p.sqsrte-small:nth-child(2)').toggle();

        })

        $('.fe-block-yui_3_17_2_1_1663633048027_41565').find('p.sqsrte-small:nth-child(2)').hide();
        $('.fe-block-yui_3_17_2_1_1663633048027_41565 .sqs-block-content p.sqsrte-small:nth-child(1)').click(function(){
            $('.fe-block-yui_3_17_2_1_1663633048027_41565').find('p.sqsrte-small:nth-child(2)').toggle();

        }) 

        $(".fe-block-yui_3_17_2_1_1663633048027_41565").click(function(){
            $(".fe-block-yui_3_17_2_1_1663633048027_41565").toggleClass('open');
        });
        $(".fe-block-aeaa291a50cfb746b08c").click(function(){
            $(".fe-block-aeaa291a50cfb746b08c").toggleClass('open');
        });
        $(".fe-block-1a523a3d869699d390b0").click(function(){
            $(".fe-block-1a523a3d869699d390b0").toggleClass('open');
        });
    }
</script>

Thank you
 

That code hides the sections, probably during editing too, so copy that code onto a text file for backup, delete it from the website, then edit the text you want, then put the code back in.

You could comment out the code if you know how as well, basically add <!-- at the very beginning and --> at the very end, but a text file might be easier.

Go turn off your sitewide animations. That's one of the first things I do on every client website. https://support.squarespace.com/hc/en-us/articles/360040839591-Site-wide-animations

2 hours ago, Adam9 said:

Thanks Vigasan. I do use code blocks throughout the site, but nothing that should affect the footer I don't think. Plus it had only started happening recently, and I haven't added any code for about a year.  Re: CSS, I only have this:

 

/* HIDE VIDEO ON DESKTOP AND MOBILE */
@media screen and ( max-width : 767px ) {

  [data-section-id="61d5dbdf5bd8f328394d335e"] {
  
    display : none;

    }

  }

@media screen and ( min-width : 768px ) {

  [data-section-id="61d8299cf4ec2f2d863a15df"] {
  
    display : none;}
}

Like @creedon mentioned above, check your site in safe mode. If it's still happening, then we know it's something on the Squarespace end. If it's fixed, you most likely have an unclosed curly brace somewhere that's messing things up.

There's no padding/margin issue from a styling perspective. That spacing is from the specific font family you're using. If you want it to fit nicely to the very left, your best bet is to use a font-family that doesn't have spacing on both sides of the letters themselves. I tried using code to change the font to another font, and the issue goes away.

Just now, SW89 said:

 

Hey it's

https://cow-purple-nwsx.squarespace.com/

So you would use something like the following.

.header-nav-item a{
   font-family: YOUR_FONT !important;
}

Use the link I provided above to set up the font properly for use as well.

Hey, you can try the code from here: https://www.adlyticmarketing.com/blog/squarespace-creating-an-accordion-style-faq-section

Also, Squarespace has an accordion block now, so see if that'll suit your needs as well.

Do you have a link to the event page?

2 hours ago, Adam9 said:

Thanks @Vigasan, here's the site: https://www.socialseason.net/

 

Hey Adam, are you currently using any code at all in terms of CUSTOM CSS or CODE INJECTION? If so, could you try commenting all the code out and see if that resolves if? If it does then we can go through the code and see which part is causing the issue.

15 minutes ago, SW89 said:

Hey everyone

 

I have a specific font that I'm using on my website but i cant seem to change the font on the nav bar buttons - The buttons are the ones in the screen shot below:

 

I have the custom font files but i just need pointing in the righjt direction in how to apply the font to these buttons.

Any help would be much appreciated, thanks !

If you know how to target those buttons (right-click the text and click INSPECT ELEMENT so you can grab the class name), you can follow this guide to get custom fonts installed correctly.

https://www.adlyticmarketing.com/blog/squarespace-using-custom-fonts

4 minutes ago, frescova said:

So this sort of worked.

I added this css -

 #yui_3_17_2_1_1697856815327_344 div.product-price {
display: none;  
}

when I'm on the page it hides de price, but then, if I navigate out and come back, the price pops back up.  it's like the id "#yui_3_17_2_1_1697856815327_344" changes. I can't find another way to identify "one" specific product. The section ID for all products is the same, so I can't target that either...

#YUI's change on refresh. Just add a CODE block to the ADDITIONAL DETAILS section of the product and only add

.product-price {
display: none;
}

Hey Ed, for questions regarding code, it's much easier if you post a link to your website. It doesn't look like the CSS selector you have is correct for a button, that looks like it would be for text only. Since there are many possible places in Squarespace to add a button, I can give you the exact code if you can provide a link to the page you're trying to style.

Yes you can, just add it like a regular link, and it'll be your website with /account/login at the end. So something like www.website.com/account/login

Keep in mind that this will take people to your home page with the login popup open.

https://support.squarespace.com/hc/en-us/articles/115012777327-Customer-accounts#toc-manually-create-a-sign-in-link

The font has to be selected somewhere in Site Styles in order for Squarespace to load the font to your website, otherwise it won't work since Squarespace doesn't load up all fonts to every website to avoid an excessive website size. You could go to Adobe FontKit and set it up manually if have an Adobe subscription and don't want to declare the font through Squarespace.

It's hard to tell without seeing the website, it looks like you might have some code that's messing things up.