Viewing entries tagged
website designer

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!

Comment

Practically Married Website Design

Bold & Pop : Practically Married Squarespace Website Design

introoooo about project

The Project:

Bold & Pop : Practically Married Squarespace Website Design

The Design:

Working with Paula to bring her business’s website to life was such a joy. Paula was a dream client because she knew exactly what she wanted but just needed some help bringing that vision to reality. Here are a few things that we considered during the design process.

  • ConvertKit integration

  • Simple and easy-to-update

  • Clean and modern design with mass appeal to multiples audiences

The biggest keys with Paula’s website was that she wanted a simply and modern design and something that would be easy for her to update on her own (one of the big reasons why we love Squarespace)! Here’s a peek at how the design turned out.

Bold & Pop : Practically Married Squarespace Website Design
Bold & Pop : Practically Married Squarespace Website Design
It was an absolute pleasure to work with Bold & Pop to create PracticallyMarried.net. They listened to and executed my ideas, but also provided suggestions and feedback. I particularly appreciated their patience with my edits and the quick turnaround time. Once the site was complete, Bold & Pop provided thorough training to prepare me to take over ongoing site updates.

I highly recommend Bold & Pop for their Squarespace expertise, attention to detail and their demeanor while interacting with clients.
— Paula, Practically Married
Bold & Pop : Practically Married Squarespace Website Design
Bold & Pop : banner
Bold & Pop : Diggin' what you see? Let's work together!
Name *
Name
Bold & Pop : banner

Comment

Comment

2018 Harlem EatUp! Website Design

Bold & Pop : Harlem EatUp! Squarespace Website Design

Last year we were so lucky to have the opportunity to redesign the website for the Harlem EatUp! food festival and we were equally as lucky this year to help them make some tweaks and get everything in tip top shape before the festival's fourth year operating! 

The Project:

The Design:

While a huge chunk of this project was updating the site with this years events and participants, we also made some design adjustments to help make it a little more user-friendly and highlight their main events. Here are some of the adjustments we made this year: 

  • Removed the colored overlay from banner images to give a more crisp, clean look

  • Integrated a new ticketing system that would be embedded into the website

  • Created a testimonial banner on the homepage using reviews from past attendees

  • Created a graphics grid on the homepage to highlight each event type with additional information on that event when a user hovers over the graphic

  • Created landing pages for both their Dine-In Series and The Stroll

  • Created a dropdown for the events in the navigation

  • Integrated an interactive map in conjunction with their founding sponsor, Citi

Here's a look at how it all turned out: 

Bold & Pop : Harlem EatUp! Squarespace Website Design

One of the main events during Harlem EatUp! is The Stroll. This actually has 3 sections and the Harlem EatUp! team wanted to make it very clear what was included in each section. Because of this, we created their landing page as an index to highlight the difference between each section.

Bold & Pop : Harlem EatUp! Squarespace Website Design

We also created a different landing page for all of the events so visitors could easily see the events by date as well as the most important info like the chefs and pricing. 

If users click on the category buttons on this page, they will then land on the landing page that we built for each of these particular events.

Bold & Pop : Harlem EatUp! Squarespace Website Design

A few design and functionality changes and we had a whole new site for the Harlem EatUp! team! We really liked the improvements in usability. Festival attendees will now be able to more easily find tickets to the dinners they are interested in or information on The Stroll as well. And of course, it was a pleasure working with such an amazing team! 

Bold & Pop : banner
Bold & Pop : Diggin' what you see? Let's work together!
Name *
Name
Bold & Pop : banner

Comment