Viewing entries tagged
Squarespace customization

3 Functional CSS Code Snippets You Need for Your Squarespace Website

Bold & Pop : 3 Functional CSS Code Snippets You Need for Your Squarespace Website

Whether you’re a fellow Squarespace designer or someone looking to spruce up their current website, we know how much you love our Squarespace coding snippets and tutorials that we give soooo we’re back with some more! In case you didn’t catch the first five (like adding a custom font to your site, you can get them here or five more we provided, you can get those here too!)

Usually the code snippets we share are fun design elements to make your site look awesome but what about the times you need something to just function better from a user experience point-of-view? Today we’re talking about some of those fixes! We’ll be sharing:

  • How to remove hyphens on mobile

  • How to hide the dates on your blog posts

  • How to force the titles in your grid gallery to wrap so all the text will display

Alright now let’s get to the good stuff!

Remove hyphens on mobile

How many times have you finalized your site to be just the way you want only to look at mobile and see half of your headers hyphenated? It looks messy and can make it hard to read your text. Luckily, adding the below text to the Custom CSS section of your site will fix this problem in 2 seconds! To find the Custom CSS section of your site, go to Design > Custom CSS.

p, h1, h2, h3 {
     -webkit-hyphens: manual !important;
        -moz-hyphens: manual !important;
         -ms-hyphens: manual !important;
             hyphens: manual !important;
   }

Remove blog date

Removing the dates of your blog posts might seem like an odd thing to do but if you have evergreen content, this is essential to keeping that content relevant! If you have a great blog post from 2017 that’s still relevant today, then visitors might discredit the post since it’s “old.” So you can see why it might be a good idea to remove the dates. To do this, you’re going to add the below code to the Custom CSS on your site.

.entry-title-wrapper .date { display: none; }

Force title in grid gallery to wrap

Don’t you just hate when you get your grid gallery looking amazing on your desktop and then you make the screen smaller or look on mobile and the text collapses but doesn’t display all of it? This is almost always an issue for us on client sites but we have an easy solution for you! Add the below code to your Custom CSS and voila! Your text will wrap now!

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
     white-space: normal; 
     line-height: 1.5em;
 }

And there you have it! Three simple codes to add to your site to help improve the functionality and user-experience no matter what screen size they have!

Please note: Because we can’t see the backend of your website, we do not provide assistance with the above code snippets.

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment

How to Create a Custom Instagram Landing Page on Squarespace

Bold & Pop : How to Create a Custom Instagram Landing Page on Squarespace

As a business owner or blogger on Instagram you learn really fast that the "link in your bio" is prime real estate. Whether you're directing your followers to your services or products, leading them to your blog, or to read more of an article, your Instagram bio is where they're headed for more info! Back in the olden days i.e. a year or so ago, we only had the option to direct our followers to one link and we had to swap them every time we wanted to direct people somewhere else. Then services popped up that allowed you to create landing pages that highlighted multiple links and it was a GAME CHANGER! Suddenly, we didn't have to remember to swap out the link and options really opened up.

Enter today, and we're going to take that option a step further by building a custom landing page right inside your website. While these services are great, a lot of them don't allow too much customization and since we're in the branding industry, you know what we're going to say about brand consistency... it's important! So today, we're going to teach you how to build your own using Squarespace, because you know that is our thang! Helloooo customization and creativity options! So read on or scroll a little bit further down to watch the screenshare video.

Step 1:

Create a new page under the "Not Linked" section and give your page a title.

Step 2:

Add your first block, whether that be a text intro or adding buttons. I suggest thinking of this landing page with the inverted pyramid style in mind, which means you have the most important info up top and continue down with less urgent info. While you have a lot more flexibility with your own custom landing page you also don't want your followers to have to scroll all the way to the bottom to find what they're looking for. Keep your user experience at top of mind!

Step 3:

Add spacers to each side. While this step isn't totally necessary because all templates are responsive, it is a little easier to visualize how the page will look by adding spacers and pushing the content to the center of the page. You can see this step in the video below.

Step 4:

If you used stacked buttons on your landing page and would like to make the widths even, then I have a code for you! You can copy and paste the code below into the advanced settings of your page. To do this, you need to hover over the name of your page in your website panel and click settings, then click advanced, and then paste the code in the Page Header Code Injection. 

<style>
 .sqs-block-button-element--small {width: 250px !important;}
</style>

The code above targets small-sized buttons so be sure to make sure the size correlates with the size you used on your page. So if you used small, use the code as is, or if you used medium or large swap out the text "small" in the code and add the applicable size. This is set for button widths of 250px, which I found worked well but you can also adjust if you'd like.

Step 5:

Once you have finished adding in blocks to your liking, publish your page! Then be sure to find out what your URL slug is, so that you can add the full url into your browser and then copy and paste that link into your Instagram profile!

You can also watch this full process below:

And that's it! A fully customized landing page for your Instagram account that you can edit any time you'd like. Have any questions? Drop us a comment below or shoot us a note and we're happy to help!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment