How To Show A Squarespace Project Title On Mobile Devices // Squarespace Project Title on Mobile
In this tutorial, you’ll learn how to use some super simple code to make sure your Squarespace project titles are visible on smaller screens.
---
📱 Squarespace Mobile + Tablet Workshop → https://insidethesquare.co/mobiledesign
---
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, we will 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. Let's get started!
UPDATED INSTURCTIONS:
To add this code to your site, navigate to Website and then select Website Tools. You'll find Custom CSS at the top of that menu; click on that to open the CSS editor and add the code below:
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
}
}
---
💬 What else do you want to learn about Squarespace portfolio design? Let me know in the comments below!
---
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-po...
---
To do this on a single page and not your entire site, I’d recommend installing it using the page header code injection. This tutorial will teach you how to install code on a single page in Squarespace: https://insidethesquare.co/singlepage
---
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
https://buymeacoffee.com/insidethesquare
- - -
📑 Download my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- - -
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
- - -
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
Watch video How To Show A Squarespace Project Title On Mobile Devices // Squarespace Project Title on Mobile online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 14 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,152 once and liked it 30 people.