Jump to content

Adjust Nav Element Font Size

By decker, in Customize with code

Go to solution Solved by meganheath,

Recommended Posts

decker Level 2

decker

Posted
Posted (edited)

Site URL: https://mattdecker-art.squarespace.com/portfolio/environment

Hi all! First day on Squarespace and I'm unable to find an element to see if it has a unique CSS class (? - been a minute).

This was a premade template to start; at the bottom of the individual portfolio pages there are some nav elements that I'd like to reduce to font size on for mobile, as they overlap.

Side question: are media queries still the most effective way to specify device styles, and do they work on Squarespace?

TIA!

nav_example.jpg

Edited by narwhal-enthusiast
linked wrong page
Link to comment
  • Replies 2
  • Views 252
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

decker
decker

Hello! Yes this solved it, cool to learn about vh and em as well. Thanks much!

Posted Images

  • Solution
meganheath Level 5

meganheath

Posted
  • Solution
Posted

Hi,

Yes, media queries work on Squarespace. The pagination element you're wanting to target uses calc to set the font size. Add this code to your site header through Settings > Advanced > Code Injection 

<style>
@media screen and (min-width: 0) and (max-width: 1567px) and (orientation: portrait){
	[data-collection-type^="portfolio"] .item-pagination-title {
    	font-size: calc((2 - 1) * 1.2vh + .6rem);
	}
}
</style>

Hope that solves it.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources