Ziggy

Great, yes, it looks like it's work to me as well. If you could mark my first response as the answer to your question that would be much appreciated.

You need to put it in the Custom CSS, under the Design tab in the dashboard. This guide should help if you can't find where to place it. https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor#toc-add-css-code You also don't want to be placing this directly on the page.

Hi @Orla try adding this to the Custom CSS of your website. It should force the image not to fill the container and crop. This will make the images smaller. .products.collection-content-wrapper .grid-item .grid-image-cover { object-fit: contain !important; } Please let me know if this has worked for you.

Hi @BaileyConstas, if you create a section at the top of each script page, and add an audio block, then add this code to the page header code injection, it should stay at the top of the page as you scroll down. <style> .page-section:nth-child(1) > .content-wrapper { padding: 0px !important; min-height:5vh !important; overflow-x:hidden !important; } .page-section:nth-child(1) { position: sticky !important; position: -webkit-sticky !important; top: -2px; z-index: 9999; } </style> You could also achieve it with a sticky sidebar like this: https://www.will-myers.com/articles/create-sticky-sidebar-in-squarespace-classic-editor

Hi @Mjhalo831, can you share the Squarespace website URL of the website that you're working on? (and sitewide password if it is not live). There are a number of ways that you can inject text into the header, reasonably successfully, and if you do that on the page header code injection, you can adjust it to different titles on each page.

Hi @emilyks can you share the Squarespace website URL of the website that you're working on? (and sitewide password if it is not live) Thanks! You are correct about the top middle bottom sections on Brine family templates, and I'm not sure why it would not be an option for you.

Hi Harry, you might want to try keeping your text in one block rather than splitting them up. That said you'll still get some variation in layout but adjusting the image to fill can improve the layout. It can also be a good idea to design and edit in an intermediate screen size, and the 24 column layout applies for screen resolutions between 750px and your maximum page width.

Hi @Lumenarius, this is possible, here's a plugin that will achieve this for you: https://www.squarewebsites.org/squarespace-plugins/lazy-summaries Hope that helps!

With CSS you can hide/show images on mobile/desktop, it's not too difficult to implement, but can make updating tricky in the future. What type of image are you trying to replace, is it in a image block or part of a gallery?

It looks like you're having an issue with the columns narrowing on medium resolution screens. Since you're in Fluid Engine, I would suggest that you either make the buttons a little wider, spanning one more column each, or change them from Fill to Fit in the design tab and right-align the left button and left-align the right button, then stretch the block container to span half the width. You'll need to make sure this still looks good on mobile, but it will fix the stacking and overlapping.

Sounds like a complex project! I don't know of any specific examples of someone doing this on Squarespace, but with whatever platform you build the website on, you're going to need a plugin or web application to collect and process and output the data, and keep it personal and secure. After a quick google I found this solution, it's referring to Wordpress, but I think you would be able to do something similar on Squarespace since the form builder could be embedded. https://www.wpbeginner.com/plugins/how-to-create-a-fitness-tracker-in-wordpress-with-charts/ https://formidableforms.com/

Hi @licia, this is a tricky problem when you are utilizing all of the header options at the same time, there's nothing wrong with this, but it almost inevitably causes the navigation to stack on smaller screen sizes. The first thing I try and do is reduce the options and ask myself if I can get away with shortening or hiding navigation titles? You have "Insights" and "subscribe to our insights" so you might be able to hide one and shorten the other. Next I look at whether I can reduce the padding on smaller screens or reduce the size of elements like the logo with CSS. And finally you might consider hiding some options in the header with CSS on smaller screens, the social icons for example might be a good place to start. I hope this helps, if you want to enact any of these and need some Custom CSS help, please let me know.

Hi @ridgeroad, are you referring to the full-screen slideshow galleries on your homepage that you don't want cropped, or another type of gallery?

I would agree that it's not a simple task, there is another thread with a potential answer for you: Does this help? Make sure you upload and replace out the image URL links.

You can either do it in a code or markdown block using ^superscript or _subscript. Or you can search for the symbol on Google or style it in a Word or Google Document and then copy/paste it into Squarespace, and it should keep the styling. Hope that helps!

This plugin allows you to pull tables and data into Squarespace, I'm not exactly sure what you're wanting to pull on to your website, but you can also embed a Google sheet directly by publishing it. https://www.squarewebsites.org/squarespace-plugins/custom-table-block If you can share a few more details I can probably help further.

Hi @ruthob93, It looks like the SquareKicker extension that you're using has set this section to have a top padding of 100px. You could either fix this in SquareKicker, or you could probably duplicate the section and delete the original (this should break the link between the padding code and this design). Let me know if that answers your question and fixes this problem!

Thanks for sharing this, how have you gone about adding this to your website? This should give you a start on uploading, but I'm not referencing the image correctly, you'll have to upload those and reference them in the javascript file. Maybe best to do this via the same method as with the JS and CSS files described below. How you would do this from your desktop seems impossible to me for Squarespace. The portion in the <head></head> tags should go in the page header code injection. The portion in the <body></body> should go in a code block on the page. The code under /index.js should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.js (this will need adding to the header code to reference correctly) (when you get the images uploaded this would need re-uploading and replacing) The code under /index.css should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.css (this will need adding to the header code to reference correctly) New Header code: <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="/s/index.css"/> <script src="/s/index.js"></script>

You will need to adjust the styling to stop it from cutting off, but that should be achievable. I'm not sure I can work out the code without being in the Custom CSS and trialing different options to fix the problem and retain the look you want.

You may be able to use this code to add in an image to the announcement bar: https://insidethesquare.co/squarespace-tutorials/announcement-bar-image

Hi @CPharmacyScot, have you got some CSS to add 1% padding on the items? It looks like that might be causing the shift.

If you're redesigning in 7.1 you should be able to use Fluid Engine, and create the overlap without CSS. Can you share the URL and site wide password as well as your old website so the forum can see what you're referring to?

The link you've provided doesn't show the website, which makes assisting you more difficult, can you reshare? You may want to explore using a menu plugin like this: https://www.will-myers.com/products/p/mega-menu-for-squarespace-71 You should be able to adjust the bold for active nav links with some CSS, which I can help you with once I can see your homepage.

There are plenty of plugins that would do this try one of the below: https://www.will-myers.com/products/p/before-/-after-image-slider https://www.rebeccagracedesigns.com/blog/before-after-image-slider-squarespace-website Or read the topic here:

If you want to change the size of a specific title, you'll most likely have to use a Block ID, the only alternative is just targeting the class in the page specific header injection but that'll only work if there is only one of that class on the page. I would also say that I have not experienced SQS changing the Block IDs at any point, over the last 7+ years. From looking at your website it appears that you've achieved this already? Both titles are the same size.