Wolfsilon

I don't see anything wrong with your CSS, but the difficult part is that we don't really have a comparison to see what it is supposed to look like either. Usually if there's a problem with fonts applying incorrectly, it's because you haven't been specific enough in your CSS to target which elements should receive the new font. Is it safe to assume that none of the descriptions and titles are inheriting the font that you installed? Could you provide the link to location where the screenshots were taken? Let's start on a single page where only some parts are inheriting the custom font. Because the font, aside from some of the headers, appears to be very similar in style to defaults ones it'll help to isolate the troubleshooting to an individual page.

Adding a light-box will be difficult here without a plugin. Esspecially since you want to keep the aspect ratio options. I'd recommend that you consider purchasing or installing your own light-box plugin to help you do this.

YOUR_BLOCK_ID { .sqs-block-button-element--(YOUR_SIZE_){ position: relative; height: auto; width: 300px; } .sqs-block-button-element:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height:auto; background-image: url(https://static1.squarespace.com/static/6164a3ef2478ba6fa5c6ac27/t/618a931bb620f002f2075578/1636471579050/Star-2-%281%29.png); } .sqs-block-button-element:after { content: ''; position: absolute; top: 0%; right: 0%; bottom: 0; width: 100px; height:auto; transform: scale(.5); background-size: cover; background-position: right; background-repeat: no-repeat; background-image: url(https://static1.squarespace.com/static/6164a3ef2478ba6fa5c6ac27/t/616545756588ab7638d3b270/1634026869189/wc-arrow-white.png); } } This is the closest I could come to getting something like this for you. The issue with your icons is that you're not using optimized image formats so adjusting them in CSS will almost always result in poorer quality images. You're better off using SVG files in the future or downloading some arrows from a SVG icon library. I'm using the default button in my example so don't mind the border but yeah, hopefully this at least gives you a reference on how to format your code.

Great, glad to hear that. Happy Coding!

Your website isn't working on my end and does not have a valid SSL certificate. I usually attempt to view websites on a Virtual Machine so no problem, but it's just a long white page with a custom font. Are you deploying this website on the Developer platform? You should only need to use new standard --- "transform: scale(_VALUE_);" -- on Mozilla Firefox. Zoom is a depreciated property that won't work for all users and shouldn't be used in product front end at all. You can read more about this here. Best, Dan

Hello, Please share the private viewing password so that we can see the issue and test in the context of your website. Thanks, Dan

Try using the following code in your Custom CSS menu: .accordion-item__description { max-width: 100% !important; } Best, Dan

Your columns appear to be evenly sized on my end. I am, however having trouble finding exactly what the issue is. Also while I'm viewing your website, I noticed that you have some JavaScript repeatedly firing in the DOM that's significantly impacting your performance as well. Hope that you were able to fix your initial issue. Let us know! Best, Dan

If you haven't already, I would check to ensure that you're using a dark image logo for your Social Sharing image which will appear on social media platforms. Though, on some applications you cannot control the way the link looks or it may take extra time for the change to appear. Navigate to the Social settings by going to: Home > Design > Social Sharing and upload your image.

Without diving head first into re-configuring your JavaScript plugin. Your best bet is to adjust the size of the font and the dimensions of the caption container to get some wrapping to happen. I'm assuming there are some extra plugins on this website but the script looks like it's just finding the "Alt" and adding the description to the side of your image. -- The container for the lightbox is: .gallery-lightbox-item-wrapper The text container is: .gallery-lightbox-caption The element selector is: .gallery-lightbox-caption p -- Because the script is only searching for and adding a single text element when lightbox is active, you cannot easily add a header/title to the caption. .gallery-lightbox-item p { font-size: 4vmin; } Should change the font size but you'll need to do some other adjustments to get it wrapping the way that you want.

Hello, Could you please also attach the password to view your private website? Thanks

Glad I could help!

Hello! I can actually see the banner bars on Desktop as well. If nobody has replied by tomorrow morning, I will take a look and help in whatever way I can. Apologies as I'm on a train and will soon lose connection. Also, I like the message/objective here! Just finished building a non-profit website for a maternal and infant health organization in the Democratic Republic of Congo for a client recently and love what you've got going here. Let me know if there's anything I can do to help. Free of charge of course. Best, Daniel

@media only screen and (max-width: 640px) { .section-background-content { display: none !important; } } Should disable the effect on mobile and leave you with the original replacement image code you shared above -- resulting in a static image, instead of the panning effect for the image.

Hello! Welcome to the community. First off, you're well on your way to getting you're website looking like how you imagine it and it's awesome to see that you're taking a step to learn about customizing your website. Couple of things to keep in mind: 1) When you're editing a block or a page, or even a section of your website. You'll do most of the editing in the Home > Design > Custom CSS tab. 2) You won't need to use a code block for editing pieces of your website with CSS that could otherwise be written in the Custom CSS tab. 3) When you're editing in the Custom CSS tab -- You won't need to use <style> tags in the menu at all 🙂 You just need to follow the following format with any variation of properties: YOUR_BLOCK/SECTION_ID_HERE { font-family: YOUR_FONT_NAME; padding: YOUR_PADDING; margin: YOUR_MARGINS; background-color: YOUR_COLORS; display: PICK_ONE_ONLY_ONE -> "Block // Flex // Inline-Block // Grid"; width: %,PX,EM,REM,VW height:%,PX,EM,REM,VH position: PICK_ONE_ONLY_ONE -> "Relative // Absolute // Fixed // Static"; font-size: %,PX,EM,REM transform: Translate (x,y), Rotate(VALUE-deg), Scale(2), so much more...; } 4) Try removing your code from the code-block and adding it to your Custom CSS menu and see if that makes a change. If not, feel free to message me or reply here with the URL and I'll do my best to clear up any confusion. Don't give up!

Are you using a custom light-box plugin for this? If so, which one?

This is most likely a relatively new issue for audio blocks. The audio blocks included by Squarespace are incredibly depreciated blocks and next to useless for modern uses in my opinion. Although, looking at your website, I do really like what you've done to customize them. My apologies if this seems rude but I'm very critical of these particular blocks and they need to be updated. I'd recommend you raise issue with the performance to customer support and hopefully they revamp these blocks soon. Otherwise, the answer is no. On mobile, they're seen as independent files and cannot be played in the page itself. Not easily at least. I'd recommend using an external plugin or hosting them through SoundCloud. If not SoundCloud, the ElfSight audio widget is fantastic.

Do you mean like, the side panel that pops up to the right of the search results for some websites? Are you talking about the icon at the top of the browser/or next to your site title in search results? Could you take a screenshot of an example search result that demonstrates what you mean?

Yeah, that's what I meant. I can't help you if the desktop panning effect is not currently on. It's not working for me in Desktop. In order for me to test any code or provide you with a code or solution to help you, I'll need to work with it in context to your specific issue. Note: You won't be able to switch the effect on or off using pure CSS. You'll only be able to disable viewers from seeing it or not.

If the bold portion of the code you shared is the only part of the code in question -- I don't see anything wrong with your code. I'd say that you haven't ended your declaration for property and value in line 2. Although, most browsers are pretty good at knowing how to construct your CSS with out it. I guess it's also possible that you haven't been specific enough with your selector targeting too. Perhaps I'm a little confused by your question. Viewing your website, I do not see any panning effects that are occurring and I'm not too sure what you're trying to achieve. Are you having a syntax error in the CSS? Are you trying to turn off pan on mobile by just hiding the image that is panning? Have you injected custom code/javascript to help you do this?

That whole website screams "I'm made with GSAP!" The short answer is no, you won't be able to use Squarespace in this way, at least not out of the box. In theory, you could do something like this on Squarespace and I'm sure you could hire someone to do it. But this whole project would look more like a custom application than anything and you'd be better off building the site from scratch and not using Squarespace at all if you really want something to look and feel like this website. Depending on your website version (7.0 preferably), you might be able to get closer to page transition effects and I've certainly seen designers here integrate them, again. You'd most likely need to hire someone. -- Just a note: Taking a look at your website, nothing is loading for me, it's just a giant white screen.

Hello, The certificate will fail if you've connected your domain to your Squarespace website incorrectly The certificate will fail if you're using an third party domain manager that does not allow you to transfer, connect, or re-configure the server settings The certificate will fail if the DNS settings and verification files from Squarespace are not updated to your domain name servers or have been removed during setup The certificate will fail if your website plan has not yet been purchased, in order to have an active website and SSL certificate, a Squarespace plan needs to be purchased regardless if you're connecting to a third-party domain. You can test your setup by refreshing your domain connections in the Domains menu, if there are any errors in the fields, indicated by red markers, you'll need to correct them. Note: If you've recently connected your domain to your active Squarespace website, and you can access an unsecured version of your website, you may need to wait 24-48 hours before a certificate will be generated. Connections to your website help propagate and accelerate this process, certificate failed is different than "certificate processing".

Do you not want people to view your website on mobile at all? I would suggest not preventing users from viewing your site on their phone, but if you absolutely need to, you can add a code that redirects your mobile viewers to a fallback page or a 404.

I'm fairly certain that you can edit the confirmation page in the "Code Injection" menu: Home > Settings > Advanced > Code Injection > Order Confirmation Page

You'll need to write a script that translates all of the images in a container through the 3d space when a scroll event occurs. You'll also want to add code that watches for and signals that the container is ready to be scrolled through when the section is in view, and prevent "normal" scrolling while your animation takes place. Otherwise, you'll run into issues where the animation is happening even when it's not in view or you'll pass through the section without seeing the animation at all. I would guess that all of the images are already positioned in the 3d space, and then that 3d space changes perspective and makes the images appear that they are out of view. This is a customized piece of code for the website so you'll need to find a developer to do this for you, or you can try to do it yourself.