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

Clay Template: Search Box Size

Asked by Dwjngs

Question

Dwjngs    0

Dwjngs
Posted (edited)

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

paul2009    28,847

paul2009
Posted

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

 

Dwjngs reacted to this

World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.
I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form Extension, Date Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post

Link to post
  • 0

Dwjngs    0

Dwjngs
Posted

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

paul2009    28,847

paul2009
Posted

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

 

Dwjngs reacted to this

World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.
I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form Extension, Date Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

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

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources