Jo_SQSP

Just like how delicious food can tantalize taste buds, a restaurant's website should whet the appetites of potential customers. Squarespace can be a perfect platform to build a beautiful and informative website that will have them booking reservations in no time.
This post will walk you through the essential ingredients for your restaurant's Squarespace website, ensuring it leaves a lasting impression.
Setting the Scene: Essential Pages for Your Restaurant Website
A Squarespace website allows you to connect with hungry patrons, showcase your culinary creations, and establish your restaurant's unique identity. Here are the key pages to get you started:
Home Page: The Appetizer
The Home Page is the digital welcome mat of your website, the first bite visitors will take of your online presence. Here, you have the opportunity to capture their attention and set the tone for their virtual dining experience.
Hero Image: This is your website's centerpiece, a high-quality visual that grabs attention and encapsulates the essence of your restaurant. Consider a delectable close-up of your signature dish, a warm and inviting image of your dining room bustling with happy diners, or a captivating video showcasing your chefs at work, preparing culinary masterpieces. Tempting Description: In a few concise and captivating sentences, highlight your culinary focus, whether it's a specific cuisine, locally-sourced ingredients, or a unique dining experience. Briefly mention your restaurant's atmosphere, enticing visitors to delve deeper and explore the rest of your website. Clear Call to Action: Don't leave your visitors wondering what to do next. Tell them clearly what action you want them to take, whether it's browsing your menu, making a reservation online, or ordering takeout for a delicious meal at home. Pro Tip: Squarespace integrates with OpenTable & Tock! 
OpenTable is a reservation system that lets your website visitors book reservations or sign up for waitlists. Learn more about this integration in this support article: support.squarespace.com/hc/en-us/articles/206544067-OpenTable-blocks Tock is a reservation program that integrates with your Squarespace site. Visitors can book tables at your restaurant or RSVP to events with a pop-up where they fill in reservation details. All the booking is handled through Tock and they have a variety of plans and features for different size restaurants.  Learn more about this integration in this support article: support.squarespace.com/hc/en-us/articles/4407879374477-Reservations-blocks-for-Tock Menu Page: The Main Course
The Menu Page is the heart of your website, the star of the show. Here, you'll showcase the culinary creations that will tantalize taste buds and have visitors eager to make a reservation.
A La Carte or Categorized: Organize your menu in a way that is clear, easy to navigate, and visually appealing. Consider presenting your dishes a la carte or categorizing them by course (appetizers, entrees, desserts) or type of cuisine (pasta, seafood, vegetarian options). This user-friendly approach allows visitors to quickly find the items that pique their interest. High-Quality Photos: Every dish deserves to be visually celebrated! Include mouthwatering appetizing photographs of each menu item. Invest in professional photography that captures the vibrant colors, fresh ingredients, and artful presentation of your food. A well-placed photo can be the deciding factor for a hungry visitor, turning their browsing into a craving for your culinary creations. Enticing Descriptions: Don't just list the ingredients - tell a story! Craft brief but compelling descriptions for each dish, highlighting the fresh, seasonal ingredients you use and the unique flavor profiles diners can expect. Use descriptive language to entice the senses, mentioning savory sauces, perfectly cooked proteins, and delightful textures. Pro Tip: Hosting a PDF of your menu is a fast way to get it on your site, but it won’t be searchable, clickable, and it might be difficult to read on smaller screen sizes.

You can avoid all those headaches by using the Squarespace menu block. This content block will display your menu in a text based format that matches the rest of your site. It also has a cool feature that lets you display a category of menu items, so people can quickly toggle between lunch and dinner, or even highlight your unique vegetarian options in their own category. For more info, check out this support article: support.squarespace.com/hc/en-us/articles/206544087-Menu-blocks
About Us Page: Sharing Your Culinary Story
The About Us Page is your chance to connect with potential customers on a deeper level, inviting them into the story behind your restaurant. Here, you can weave a narrative that captures the heart and soul of your establishment, fostering a sense of connection and trust with your audience.
Tell Your Restaurant's Story: Where did your culinary journey begin? Was it a lifelong dream, a family recipe passed down through generations, or a passion for a specific cuisine? Share the inspiration behind your restaurant's creation, the values that guide your approach to food, and the unique philosophy that sets you apart. Let your visitors understand the "why" behind your restaurant, the driving force that fuels your dedication to providing a memorable dining experience. Introduce Your Team: Put a face to the name! Showcase the talented individuals who bring your culinary vision to life. Feature your chefs, wait staff, and any other key members of your team. Briefly highlight their experience, their areas of expertise, and their passion for creating exceptional food and service. This personal touch allows potential customers to connect with the people who create the magic behind each dish they'll enjoy at your restaurant. A Glimpse into Your Ambiance: Let your website visitors experience the atmosphere of your restaurant before they even step through the door. Include captivating photos of your restaurant's interior and exterior. Capture the warm lighting, comfortable seating arrangements, and any unique design elements that contribute to your dining space's character. Showcase photos of satisfied customers enjoying their meals, creating a sense of vibrancy and community that will entice potential diners to join the experience. Contact Us Page: How to Find Your Table
The Contact Us Page is the bridge between the digital world of your website and the in-person experience you offer at your restaurant. Here, you'll provide all the essential information potential customers need to connect with you, make reservations, and plan their visit.
Making Connections Easy: Your Contact Us Page should clearly display your restaurant's address, phone number, and email address in a prominent location. Consider incorporating a map integration to visually guide visitors to your doorstep. Additionally, if you utilize an online reservation system like OpenTable, embed the reservation content block directly on the page, allowing visitors to seamlessly book a table with just a few clicks. Social Butterfly: In today's digital age, social media is a powerful tool for connecting with potential customers. Include links to your active social media profiles on platforms like Instagram and Facebook. Showcase stunning photos of your dishes, share updates about special events and promotions, and engage with your audience to build a sense of community. Open Communication: Let your visitors know you value their feedback! Consider including a contact form on your page, allowing them to send questions, comments, or suggestions directly to your team. Make sure you update the post submit form text to let people know their message was sent and when they should expect to hear from you. Extra Flavor: Features to Spice Up Your Website and Attract New Diners
The essential pages we've covered provide a solid foundation for your restaurant's website, but Squarespace offers a treasure trove of additional features that can elevate your online presence and attract a wider audience of hungry customers eager to discover your amazing food. Let's delve into some of these features and explore how they can add "extra flavor" to your website, transforming it into a powerful marketing tool.
Tempt with a Blog: Share Your Culinary Expertise and Passion
A blog on your restaurant's website is more than just a digital recipe box. It's a platform to showcase your culinary knowledge, share your passion for food, and engage with potential diners on a deeper level. Here are some key benefits of adding a blog to your website:
Content is King: Search engines reward websites with fresh, informative content. Regularly updated blog posts can improve your website's ranking in search results, making it more discoverable by potential customers who are searching for restaurants in your area. Showcase Your Expertise: Share your culinary knowledge and creativity through blog posts featuring recipes, chef interviews, or food pairing recommendations. This content positions you as an authority in the culinary world, building trust and credibility with potential diners. Fuel Curiosity and Cravings: Use your blog to tease upcoming menu items, highlight seasonal ingredients, or share behind-the-scenes glimpses into your kitchen. This creates a sense of anticipation and excitement, enticing readers to visit your restaurant and experience your culinary creations firsthand. Build Community: A blog fosters a two-way conversation with your audience. Encourage comments and questions on your blog posts, allowing you to connect with potential customers and address their specific interests. This interaction fosters a sense of community and loyalty, drawing diners closer to your restaurant. Targeted Marketing: Your blog content can be a powerful marketing tool. Promote special offers, announce upcoming events, or highlight new menu items through blog posts. This targeted approach allows you to reach potential customers who are already interested in what your restaurant has to offer. Order Pickup Options: Convenience is Key in Today's World
In our fast-paced world, convenience reigns supreme. Offering online ordering through your website allows customers to seamlessly place a pickup order from your restaurant, satisfying their cravings without the need for a phone call. Here's how online ordering can benefit your restaurant:
Increased Sales: By offering online ordering, you remove a barrier to entry for potential customers. Those who might hesitate to pick up the phone can easily place an order with a few clicks, leading to a potential increase in sales. 24/7 Ordering: Your website never sleeps! Online ordering allows customers to place orders outside of your regular business hours, capturing those late-night cravings and spontaneous decisions to enjoy a delicious meal at home. Improved Order Accuracy: Online ordering systems minimize the risk of errors that can sometimes occur during phone orders. Customers can customize their orders exactly as they like, leading to a more positive dining experience. Data Collection: Many online ordering systems capture valuable customer data, such as order history and preferences. This information allows you to personalize marketing efforts and target promotions to specific customer segments. This Squarespace feature is not the same as home delivery programs like DoorDash or UberEats. Check out this article for more information on local pickup options that are built right into Squarespace: https://support.squarespace.com/hc/en-us/articles/207100347-Local-pickup
Showcase Your Reviews: Building Trust Through Social Proof
Positive customer reviews and testimonials are like digital gold for your restaurant. Featuring them prominently on your website can significantly impact your ability to attract new diners. Here's why showcasing reviews is a recipe for success:
Social Proof in Action: Positive reviews from satisfied customers act as social proof, validating your restaurant's quality and trustworthiness. Potential diners are more likely to patronize a restaurant that boasts glowing reviews from others. Building Trust: Reviews offer a glimpse into the real-life experiences of your customers. Showcasing positive reviews allows potential diners to trust that they'll have a delicious and enjoyable dining experience at your restaurant. Addressing Concerns: Negative reviews, while not ideal, can be an opportunity to showcase your commitment to customer satisfaction. By responding promptly and professionally to negative reviews, you demonstrate your dedication to resolving issues and improving your service. A Conversation Starter: Reviews can spark conversation and engagement on your website. Encourage customers to leave reviews and respond to comments, fostering a sense of community and interaction. Events Calendar: Keep Customers Informed and Engaged
Does your restaurant host special events, themed nights, or cooking classes? An events calendar on your website is a fantastic way to keep potential customers informed and engaged. Use an events page inside Squarespace to showcase any special events or theme nights you’re hosting. These event pages can be easily added to a calendar with a click, and you can feature content blocks like OpenTable, Tock or a custom menu for the event! 
Picking The Perfect Template
Squarespace offers beautiful pre-made templates designed specifically for restaurants, but all of the features mentioned in this article can be added to any site! Here are a few template suggestions that you’ll find in Squarespace, and from talented Squarespace designers:
Proud of your menu? Show it off with Pine: https://pine-fluid-demo.squarespace.com/
Ready for reservations? Tantillo is designed for that: https://tantillo-fluid-demo.squarespace.com/
Have an engaging origin story? Share the savory details in Eldridge: https://eldridge-fluid-demo.squarespace.com/
Show how simple elegance can be stunning with Juniper: https://juniper-fluid-demo.squarespace.com/
If you liked this article, be sure to follow me here on the Squarespace Forum and on my YouTube channel at youtube.com/insidethesquare.

I’ve got a lot more to share about all the creative ways you can make Squarespace uniquely yours, and will be posting often! Next up: photographers, authors, and individual service providers.
Please Share Your Thoughts:
Is there a restaurant tip you want to share, or an epic template we can add to the list?
What industry should we talk about next?
Take a second to let me know - I’m excited to read your thoughts 😊

Welcome to the Online Sellers club, a space for business owners in the Squarespace community! We’re glad to have you here. We’d love to get to know you better so take a second to introduce yourself in the comments. If you’re not sure of what to say, you can use the following questions for some inspiration: 
What’s your name and where are you from?  Tell us a bit about your business?  What’s one tip you would share with others looking to start a business online?  After you introduce yourself, you can react and comment on other members’ introductions!
 

Starting your own business is an exciting and momentous endeavor that should be celebrated every chance you get. We invite you to introduce your business to the community and find out what others are up to in the comments below! Feel free to include interesting business origin stories, noteworthy milestones, or anything else you’d like to share. We’d love to hear it!

Welcome to the new Squarespace Forum! We’re excited to re-launch this peer-to-peer community and expand our focus to help our customers connect and share code, design, and business advice that will help you be successful with Squarespace.
In addition to topics around building and customizing your site, we’ve added more around getting feedback and advice about your site’s design (Feedback and Ideas) and ways to increase your presence online (SEO and Marketing). 
Please read over our Forum Guidelines so we can make sure this is a helpful, inclusive space for everyone.  If you encounter any technical issues or need assistance with your forum account, please reach out to the Community Team. For Squarespace account assistance, please contact Squarespace Customer Support. 

Restaurants

I got a few more ideas from my Instagram fam today (here's a link to my profile if you wanna join the fun)
martial arts authors (writers & poets) medi spas corporate events catering weddings

Not for Profits

I'm going rogue and not requesting an industry in particular, but more overall: how to do great sites for industries that don't need (or want or have) a lot of photography. Thanks for all you do @inside_the_square!

Restaurants!

Graphic Designers' Portfolios
 

Small yoga studio in-venue and online

Boutique fitness studios!
 

Art galleries

These are all great - thank you, everyone!! I posted this question to my YouTube community and got some great responses there that I wanted to add here: 
Legal and accounting! These are often just brochure sites, with contact information. Local clubs and societies, which often don’t have much money but need a site.  Food retail / restaurants (that have POS) Non-profits Franchises

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
This leads me to one of my favorite questions from the Q&A:
Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
You’ll find the full Q&A below, but here is a quick recap:
1 - only use CSS for things you can’t change using the design menus built into Squarespace.
2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
4 - make notes for yourself in case you need to edit your code
5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
Most importantly, have fun with your Squarespace website.
ALL my best - Becca
Questions
How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

We're teaming up with Circle member Becca Harpain ( @inside_the_square) to bring you a new series on the Squarespace Forum dedicated to empowering you with the knowledge and insights needed to build industry-specific websites on Squarespace. Whether you’re a seasoned Squarespace user, a budding entrepreneur exploring website creation, or someone keen on maximizing the potential of this versatile platform, this series is for you. 
What to expect
In an era where every business, big or small, needs a compelling online presence, understanding the nuances of different industries can make all the difference. Each sector comes with its own set of challenges, opportunities, and unique characteristics that should be reflected in its online representation.
Becca will be providing her insights on how to make the most of your Squarespace website for specific industries over the next few months. 

Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate
Please reply to this topic with any industry suggestions! If you see any suggestions in the comments you want to see addressed, simply like the comment. We’ll be selecting 5 suggestions to address in this series.
 

We're teaming up with Circle member Becca Harpain ( @inside_the_square) to bring you a new series on the Squarespace Forum dedicated to empowering you with the knowledge and insights needed to build industry-specific websites on Squarespace. Whether you’re a seasoned Squarespace user, a budding entrepreneur exploring website creation, or someone keen on maximizing the potential of this versatile platform, this series is for you. 
What to expect
In an era where every business, big or small, needs a compelling online presence, understanding the nuances of different industries can make all the difference. Each sector comes with its own set of challenges, opportunities, and unique characteristics that should be reflected in its online representation.
Becca will be providing her insights on how to make the most of your Squarespace website for specific industries over the next few months. 

Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate
Please reply to this topic with any industry suggestions! If you see any suggestions in the comments you want to see addressed, simply like the comment. We’ll be selecting 5 suggestions to address in this series.
 

We’ve added two brand new clubs to the Squarespace Forum: Artists and Photographers and Online Sellers. Clubs are like social groups, and you can join them to connect with others who are also interested in the club’s topic. 
You can join the clubs to introduce yourself or your business, share your work, get advice, and get to know others in the Squarespace community. 
Everyone’s welcome to join! Click the links below to join a club and introduce yourself: 
Artists and Photographers Online Sellers 

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
This leads me to one of my favorite questions from the Q&A:
Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
You’ll find the full Q&A below, but here is a quick recap:
1 - only use CSS for things you can’t change using the design menus built into Squarespace.
2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
4 - make notes for yourself in case you need to edit your code
5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
Most importantly, have fun with your Squarespace website.
ALL my best - Becca
Questions
How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
This leads me to one of my favorite questions from the Q&A:
Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
You’ll find the full Q&A below, but here is a quick recap:
1 - only use CSS for things you can’t change using the design menus built into Squarespace.
2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
4 - make notes for yourself in case you need to edit your code
5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
Most importantly, have fun with your Squarespace website.
ALL my best - Becca
Questions
How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
This leads me to one of my favorite questions from the Q&A:
Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
You’ll find the full Q&A below, but here is a quick recap:
1 - only use CSS for things you can’t change using the design menus built into Squarespace.
2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
4 - make notes for yourself in case you need to edit your code
5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
Most importantly, have fun with your Squarespace website.
ALL my best - Becca
Questions
How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
Why CSS on Squarespace matters
While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
How to participate
Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
 

Have you ever heard of the term “mobile-first design”? It’s a common concept among web designers who want to stay ahead of the curve on the technologies that we use every day to view sites on the Internet. The philosophy contained within mobile-first design is called “progressive advancement,” which dictates that you should design your web presence with smaller screens in mind first, which in turn makes it easier for you to progressively move on to larger screens.  
According to data shared by the AdobeXD Ideas blog, two billion people currently access the internet on their mobile devices, and that number is expected to jump 72.5% in the next three years. That’s a lot of people to think about! In essence, thinking about mobile-first design forces you to strategize and prioritize your content so that it is leaner and more to the point, to use headings strategically in order to create a visual hierarchy, reduce the number of links in your navigation to fit a smaller screen, use fonts that prioritize readability, and to use white spaces to your advantage for a cleaner layout. 
What are your best practices for designing more mobile friendly sites? Share your ideas below!
 

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
Why CSS on Squarespace matters
While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
How to participate
Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
 

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
Why CSS on Squarespace matters
While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
How to participate
Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.