How To Show A Squarespace Project Title On Mobile Devices
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
As mobile usage continues to grow, it's important that your Squarespace website looks great and is functional on all devices, including smartphones and tablets!
Squarespace 7.1 has more mobile design options than earlier versions, but sometimes you need to customize your site to get the look and functionality you want.
In this tutorial, I’ll walk you through the steps to display your project titles on mobile devices using CSS, so your visitors can easily identify the projects they're interested in.
Watch the tutorial below, and keep scrolling to find the steps and codes below!
Let's get started!
To add this code to your site, navigate to Design and then select Custom CSS from the bottom of the design menu.
Here are the main codes from this tutorial:
@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
}
If you want to add a background color to the project title, use this code and change #fff to the color you want to see! (Learn more about colors at insidethesquare.co/colors)
@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
.portfolio-text *{background:#fff}
}
}
If you want to customize your design even more, modify the colors and radius in this code to create a transparent and rounded text background with a border:
@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
.portfolio-text *{
background:rgba(255,255,255,.5);
border-radius:3rem;
border: 1px solid #333
}
}
Want to install this on a single portfolio and not your entire site?
➜ Click on the portfolio page gear icon to open its settings menu.
➜ Select page header code injection.
Add the code to your page header code injection, nested between style brackets, like this:
<style>
@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
} </style>
Wondering if a portfolio is the right type of collection page for your website?
Check out this video about the differences between a Squarespace blog and a Squarespace portfolio. https://insidethesquare.co/blog-vs-portfolio
What else do you want to learn about portfolio design? Let me know in the comments below!
