Jump to content

Custom CSS for search results page

Recommended Posts

Site URL: https://www.youturnproperties.com/search?q=2839

I have been spending days on this so any help is greatly appreciated. 

The link to my search results page is: houses - (youturnproperties.com)

The CSS code is am using is:

  1. /* hide description on search page */
  2. div.sqs-search-page-item .sqs-content .sqs-content {
  3.     display: none;
  4. }
  5. /* Image size */
  6. .sqs-search-page-item .sqs-main-image-container {
  7.     width: 100%;
  8. }
  9. .search-results .search-result{
  10.     float: middle;
  11.     width: 40%;
  12. }
  13. /* space between search image - title */
  14. div.sqs-search-page-item .sqs-main-image-container {
  15.     margin-bottom: 20px !important;
  16. }

Now I'm sure that I'm doing this incorrectly from my end. When searching for anything on my page, the mobile is completely different from the desktop version and for reference I'm using blog pages. So I'd want to know the CSS codes for:

  1. How to make the text/font in the title of my postings appear smaller? They came up way too big on mobile. I don't want to change any other font or size on my site though, only for search results.
  2. How to make the text of the title be on the side of the picture INSTEAD of directly under the picture? As it being directly under the picture is causing the title text to stack and look bad.
  3. When searching for a result that isn't found', It says "Your Search did not match any documents" I'd rather it just say "No results found." 

Thanks again,

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Q1. Q3. Add to Design > Custom CSS

.sqs-search-container-item .sqs-title {
    font-size: 1.4em;
.sqs-search-page-notice {
    visibility: hidden;
.sqs-search-page-notice:before {
    content: "No results found.";
    visibility: visible;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.