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
  • Views 983
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • 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.