Jump to content

Clay Template: Search Box Size

Recommended Posts

Site URL: https://pvastx.org

We're using the Clay template and have enabled the search feature in the header. It's set to only show the magnifying glass icon, and when you click on it it opens a blank page containing only the search box (which is fine). However, the search box is HUGE, spreading across the whole page and magnified. Is there a way to edit the page that's generated when clicking on the search icon to display a search box that is sized to match the content on the rest of the site? Thank you!

Huge Search Box.png

Edited by Dwjngs
Link to comment

Sure, you can change it. What do you want it to look like?

If it's just the huge font that's the issue (30px!) then you can reduce it with this:

.sqs-search-container input {
  font-size: 14px;
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

To reduce the size further, try adding this too:

/* Reduce search box size              */
/* Use in Custom CSS. Do not republish */
@media only screen and (min-width: 800px) {
  .sqs-search-page-input {
    margin: 0 25%; 
    padding: 8px 15px 8px 50px;
    background-size: 17px;
  }
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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