bycrawford

Hey everyone! I've *finally* decided to double down and get involved on the forums!
My name is Sam and I run a few businesses, all with websites built on Squarespace.
- I have a Squarespace web design business called 'by Crawford' which has won 4 separate awards in the past 18 months. You can learn more about that at https://www.bycrawford.com/
- I also run a blog called 'The Man Blueprint' where I have been offering self-improvement advice to guys for over 6 years. You can read my articles here: https://www.themanblueprint.com/
- And finally, I have an education company called 'Blog Lifestyle Mastery' where I combine the above to teach people how to create industry-leading blogs on Squarespace, building a lifestyle and income that can offer unbridled freedom. You can check that out here: https://www.bloglifestylemastery.com/
Looking forward to giving as much value as I can long into the future 🚀

Hey @Immortal_Explorer - potentially - it is quite blocky in some places.
I'm not a design expert, but you can probably achieve the same word count/copy amount but "hide" it by having sliders etc. that tie things off nicely.
I know @bycrawford does this well on his homepage: https://bycrawford.com/ 

Hi
I am building a site and am creating a ‘Portfolio’ page with PNG images. I want the user to be able to ‘scroll’ these images as if they were a webpage as they are a lot longer than the image box. Like a iFrame but with a PNG rather than a live site. An example of what I am trying to do is on @bycrawford site.
Is there a setting or CSS code I could use?
Any input greatly received.

Hey Kristin, it looks like you have conflicting code which is stopping the font weight being applied.
The use of the regular font seems to be overriding the bold.
I would suggest process of elimination.
So start by removing all code and then just adding in:
// My own bold font semi-bold 600 @font-face { font-family: CrimsonTextSemiBold;   src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf); } // Bold text strong {   font-family: 'CrimsonTextSemiBold' !important; } Then you can add the other codes back in one by one. That said, I'm not sure you even need to add bold or italic versions into your site. You should be able to just add the regular text and then specify bold or italic using the text editor.

Hey Kristin, it looks like you have conflicting code which is stopping the font weight being applied.
The use of the regular font seems to be overriding the bold.
I would suggest process of elimination.
So start by removing all code and then just adding in:
// My own bold font semi-bold 600 @font-face { font-family: CrimsonTextSemiBold;   src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf); } // Bold text strong {   font-family: 'CrimsonTextSemiBold' !important; } Then you can add the other codes back in one by one. That said, I'm not sure you even need to add bold or italic versions into your site. You should be able to just add the regular text and then specify bold or italic using the text editor.

Hi! I was able to do exaclty that! Thank you so much

Hey everyone! I've *finally* decided to double down and get involved on the forums!
My name is Sam and I run a few businesses, all with websites built on Squarespace.
- I have a Squarespace web design business called 'by Crawford' which has won 4 separate awards in the past 18 months. You can learn more about that at https://www.bycrawford.com/
- I also run a blog called 'The Man Blueprint' where I have been offering self-improvement advice to guys for over 6 years. You can read my articles here: https://www.themanblueprint.com/
- And finally, I have an education company called 'Blog Lifestyle Mastery' where I combine the above to teach people how to create industry-leading blogs on Squarespace, building a lifestyle and income that can offer unbridled freedom. You can check that out here: https://www.bloglifestylemastery.com/
Looking forward to giving as much value as I can long into the future 🚀

As @bycrawford said you should reduce the number of grid rows, but since you have images layered in that section you may want to adjust their position first.
The reason that the image takes up the full height of the screen on mobile is that you have this code in Custom CSS that is forcing the section to be full height (100vh):
@media screen and (max-width: 767px) {
section[data-section-id="64e54f9bb946601f10e2af9e"] {
    min-height: unset !important;
    height: 100vh;
}}
If you remove that the section height will then be set by the section settings of 33vh (small in the section settings) and by the contents of the section.
To summarise; remove code, rearrange images and reduce the number of rows. 

This works perfectly - thank you!

This is new code, a bit complex
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<img id="img1" src="https://cdn.pixabay.com/photo/2023/06/22/21/00/children-8082256_1280.jpg" />').appendTo('[data-section-id="649ab508b102a26feb925460"] .section-background'); $('<img id="img2" src="https://cdn.pixabay.com/photo/2023/03/01/15/28/trees-7823389_1280.jpg" />').appendTo('[data-section-id="649ab508b102a26feb925460"] .section-background'); $('<img id="img3" src="https://cdn.pixabay.com/photo/2023/06/01/13/07/annas-hummingbird-8033578_1280.jpg" />').appendTo('[data-section-id="649ab508b102a26feb925460"] .section-background'); // design $('#img1').css('display', 'none'); $('#img2').css('display', 'none'); $('#img3').css('display', 'none'); $('[data-section-id="649ab508b102a26feb925460"] .section-background img:nth-child(1)').attr('id', 'img0') $('div#block-yui_3_17_2_1_1687859861440_11266 [href="/design"]').hover(function(){ $('#img0').removeClass('fadein'); $('#img1').removeClass('fadeout'); $('#img1').css('display', 'unset'); $('#img0').css('display', 'none'); $('#img2').css('display', 'none'); $('#img3').css('display', 'none'); $('#img1').addClass('fadein'); }, function() { $('#img0').removeClass('fadeout'); $('#img1').removeClass('fadein'); $('#img0').css('display', 'unset'); $('#img1').css('display', 'none'); $('#img2').css('display', 'none'); $('#img3').css('display', 'none'); $('#img0').addClass('fadein'); } ); // branding $('div#block-yui_3_17_2_1_1687859861440_11266 [href="/branding"]').hover(function(){ $('#img0').removeClass('fadein'); $('#img1').removeClass('fadeout'); $('#img2').css('display', 'unset'); $('#img0').css('display', 'none'); $('#img1').css('display', 'none'); $('#img3').css('display', 'none'); $('#img2').addClass('fadein'); }, function() { $('#img0').removeClass('fadeout'); $('#img2').removeClass('fadein'); $('#img0').css('display', 'unset'); $('#img1').css('display', 'none'); $('#img2').css('display', 'none'); $('#img3').css('display', 'none'); $('#img0').addClass('fadein'); } ); // seo & marketing $('div#block-yui_3_17_2_1_1687859861440_11266 [href="/seo-marketing"]').hover(function(){ $('#img0').removeClass('fadein'); $('#img3').removeClass('fadeout'); $('#img3').css('display', 'unset'); $('#img0').css('display', 'none'); $('#img2').css('display', 'none'); $('#img1').css('display', 'none'); $('#img3').addClass('fadein'); }, function() { $('#img0').removeClass('fadeout'); $('#img3').removeClass('fadein'); $('#img0').css('display', 'unset'); $('#img1').css('display', 'none'); $('#img2').css('display', 'none'); $('#img3').css('display', 'none'); $('#img0').addClass('fadein'); } ); }); </script> <style> /* design */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; display: unset; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0;} } .fadeout { animation: fadeout 2s; } .fadein { animation: fadein 2s; } .section-background img { object-fit: cover; width: 100%; height: 100%; } .section-background img { position: absolute !important; } section[data-section-id="649ab508b102a26feb925460"] .section-background .section-background-overlay { z-index: 1; } </style>  

Awesome, that worked. Thank you!

Thanks! I understand what you mean now.

What do you mean by transparent? What will the user actually see the footer as?
Do you want there to be an image as the background? Otherwise you'll have to have some form of colour.

This worked perfectly, thank you!!!!

Hey Abi, I actually made a video off the back of your query over on YT: 
Some fonts only have a set amount of font weights to choose from (anywhere between 100-900) so it is dependent on what you're using on what site. Hope this helps!

Yep, try the universal filter plugin: https://www.squarewebsites.org/squarespace-plugins/universal-filter
It allows you to enable an absolutely brilliant search function on blog collections.
Here's an example site I used it on: https://www.modeltalent.co.uk/women

Hi @MaddyOwl
Yoast doesn't support Squarespace; however, I am launching a Squarespace SEO Plugin ("the Yoast for Squarespace") later in Q1, which you can check out here: https://www.roughwatermedia.com/squarespace-seo-plugin
We launched our V1 of the product to a waiting list in November, and over 40 businesses signed up for our paid plan.
The launch was so successful, that we are rebranding the plugin and releasing a free plan, so every Squarespace user can have a jargon-free, easy-to-use SEO expert in their pocket 💪
Hope this helps!

Hey Vietmar, here's the solution:
.header-title-logo a:after {
    content: "Add text here";
    display: inline-block;
    font-size: 15px;
    padding-left: 25px;
    text-align: center;
    vertical-align:middle;
}
.header-title-logo img {
    vertical-align: middle;
}

No problem! Could you send me the link to your site with password please? I can write the code for you then.
 

Hey! Nice site.
Use this:
.eventlist-column-thumbnail { border-radius: 20px !important; }  

I have found a solution to hide the join button, which works! This is taken from https://www.squarestylist.com/blog/workarounds
HIDE THE JOIN BUTTON
If you're going to use the Squarespace Member Areas, it's best to set up a free membership space so that you won't have to use its native checkout feature. Still, we'd have to work on safeguarding your premium content by adjusting the settings.
Whenever a person clicks on your member area without an account, they'll be redirected to an Access Denied screen, where they'd be prompted to join if they haven't yet. You'd have to hide this default member sign-up block using CSS and JavaScript so they can't bypass the payment gateway.
All you have to do is add the snippet below to Settings> Code Injection > Footer.
 
 
<!--Squarestylist Snippet to Hide Join Button--> <script> var sqelem= document.querySelector('#sqs-member-access-page-root .sqs-editable-button'); sqelem.remove(); </script> <!--END SQSTYLIST JOIN BUTTON--> Also, don't forget add this code snippet to Custom CSS. Press Cmd+Ctrl + ↓ to immediately get to the very end of your panel.
#sqs-member-access-page-root .sqs-editable-button { display:none; }

Thank you for the options!  I will try doing the button CSS with the added hover effect. 
 

Use Ryan's code, but instead of replicating the pages just add links in that direct to the pages you've already built. This is probably the most efficient workaround!

Add to Design > Custom CSS
.eventlist-title .eventlist-title-link:after { content: "View Event"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #7fabff; color: white; font-size: 18px; padding-left: 10px; padding-right: 10px; }  

Hey everyone! I've *finally* decided to double down and get involved on the forums!
My name is Sam and I run a few businesses, all with websites built on Squarespace.
- I have a Squarespace web design business called 'by Crawford' which has won 4 separate awards in the past 18 months. You can learn more about that at https://www.bycrawford.com/
- I also run a blog called 'The Man Blueprint' where I have been offering self-improvement advice to guys for over 6 years. You can read my articles here: https://www.themanblueprint.com/
- And finally, I have an education company called 'Blog Lifestyle Mastery' where I combine the above to teach people how to create industry-leading blogs on Squarespace, building a lifestyle and income that can offer unbridled freedom. You can check that out here: https://www.bloglifestylemastery.com/
Looking forward to giving as much value as I can long into the future 🚀