How To Show A Squarespace Project Title On Mobile Devices

By default, Squarespace templates may hide certain elements, like project titles, on mobile devices to optimize for smaller screens. If you wish to display your project titles on mobile devices, you may need to add some custom code to achieve that. Here you’ll learn how to show a Squarespace project title on mobile devices.

Squarespace has plenty of options for different screen sizes but sometimes you need to customize the project titles on mobile devices so that the visitors can have a good experience and user-friendly interface. In this blog post, I’ll walk you through the process step-by-step, so you can show your project titles on mobile devices on your Squarespace site.

Disclaimer: Proceed with caution when editing the CSS and HTML of your site, as it can break the layout or functionality if not done correctly.

How To Show A Squarespace Project Title On Mobile Devices

• Log in to Squarespace backend.
• Open the editor mode and navigate to design.
• scroll down to locate the custom CSS and open it.

This guide is for Squarespace version 7.1 and it will not work for the sites built on older versions of Squarespace.

Adding CSS Code

Now that you’ve located the custom CSS, copy the code given below and paste it.

@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
}

Testing

Save the changes and open your site on a mobile device or use the device toggle option in your browser’s developer tools to test how the project title appears.

Additional Customizations

If you want to make more aesthetic changes to the title, you can extend the code. if you want to change the background color of the project title use the code given below:

@media only screen and (max-width: 799px){
.portfolio-text{
opacity:1!important;
}
.portfolio-text *{background:#fff}
}
}

Make sure to change the #fff to the color you want to match your site.

Complete Customization

If you want to show project titles on mobile devices with a background color, border, and round corners then use the code given below:

@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
}
}

You can change the color codes and border-radius accordingly.

Project titles for an individual portfolio

Do you want to install the code on a single portfolio page? no worries

Here is the process:

1. Log in to your Squarespace account.
2. Navigate to the backend of your site.
3. Hover over the specific portfolio page. a gear icon will appear, click on that icon.
4. Go to Settings > Advanced > page header code injection.

Copy the code and paste it.

<style>
@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
}
}
<style>

How do I make my project title visible on mobile without CSS?

Navigate to Design > Site Styles

Look for options related to ‘Project Title‘ or ‘Mobile Styles‘.

Depending on your template, you may find a toggle or settings to make project titles visible on mobile.

Troubleshooting

1. Project Title Still Not Showing: Double-check you used the correct one.
2. Layout Issues: Custom CSS can sometimes cause other elements to act unpredictably. Test thoroughly.
3. Cache: Sometimes you may not see changes immediately due to caching. Try clearing your cache or opening your site in an incognito window.

Conclusion

Making your project titles visible on mobile devices can enhance the user experience and offer your visitors better context. Although Squarespace doesn’t provide this feature out of the box for all templates, a little custom code can solve the problem quite quickly.

Happy Squarespacing!

Frequently Asked Questions

Why doesn’t my Squarespace project title appear on mobile devices?

By default, some Squarespace templates might hide project titles on mobile to optimize the display. You might need to change this setting in the Squarespace Site Styles panel or use custom CSS code to make the project title visible on mobile.

How do I make my project title visible on mobile using Site Styles?

Navigate to Design > Site Styles and look for options related to ‘Project Title’ or ‘Mobile Styles’. Depending on your template, you may find a toggle or settings to make project titles visible on mobile.

Can I use custom CSS to display the project title on mobile devices?

Yes, custom CSS can be used to show project titles specifically on mobile devices.

Will adding a project title affect my mobile site’s performance?

Displaying the project title should have a negligible impact on your site’s performance. However, it may affect the visual layout, depending on the available screen real estate.

Is it possible to show the project title only on certain pages when viewed on mobile?

Yes, you can use page-specific CSS to control the visibility of the project title on mobile for specific pages.

How do I find the CSS class name of my project title?

You can use browser developer tools to inspect your website’s HTML and CSS. Right-click on the project title and select ‘Inspect’ to find its CSS class name.

Can I make the project title clickable on mobile devices?

If your Squarespace template doesn’t already do this, you can use JavaScript or custom HTML/CSS to make the project title clickable.

Can I adjust the font size of the project title for mobile devices?

Yes, you can adjust the font size using the Site Styles settings or by adding custom CSS specific to mobile screen sizes.

Will changes to the mobile project title also affect the desktop version?

Not necessarily. If you use media queries in your custom CSS, you can target styles specifically for mobile or desktop.

I’ve made changes but the title still doesn’t appear on mobile. What should I do?

Clear your browser’s cache or try viewing your website in incognito mode to see if the changes have taken effect. If it still doesn’t show up, double-check your settings and custom code for errors.