Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Dwjngs

Clay Template: Search Box Size

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

Hi, Paul - I'm hoping to change the size of the box itself (image attached).

Your CSS works great for font size, though - thanks for the speedy and useful response!

Huge Search Box 02.png

Share this post


Link to post
  • 0

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

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...