Custom CSS - search result page

Here you go

https://www.yourkindlifestyle.co.uk/shop

password: tuanphan

On 11/9/2021 at 2:05 AM, maria39 said:

What is exact css you use to fix the issue? 
Can you please share the code with me?

Can you share link to your site? We can take a look

Hello,

I also have this issue, but in a search bar/block that I have coded into my header.

I just want the product title to appear with an image.

Thank you.

Website: https://littleberrybutton.co.uk

On 2/16/2022 at 3:59 PM, Sophiejacksonstudios said:

Hello,

 

I also have this issue, but in a search bar/block that I have coded into my header.

I just want the product title to appear with an image.

Thank you.

Website: https://littleberrybutton.co.uk

Search page or search preview? If search page, add this to Design > Custom CSS

/* hide search content on search page */
.sqs-search-container-item .sqs-content .sqs-content {
    display: none;
}

If you need grid layout, let me know, we will check it again

https://littleberrybutton.co.uk/search?q=title&f_collectionId=602d83ddfd0d880af0e42197

Hi! Is there a way to change the search result order?

Now when I hit search, the result shows the different blogs in the wrong order of publishing. I want it to show from the oldest to the latest.

All the best!

/Tommy

Is there a too also just show the blog photo as a result? Without any text?

Cheers!

/Tommy

22 hours ago, TWesters said:

Hi! Is there a way to change the search result order?

Now when I hit search, the result shows the different blogs in the wrong order of publishing. I want it to show from the oldest to the latest.

 

All the best!

/Tommy

Hi,

#1. No ideas.

#2. Use this CSS

.sqs-search-container-item .sqs-title {
    display: none;
}

Thank you! The text is gone but it leaves a big empty clickable space. Any way to remove that?

All the best! /Tommy

On 5/28/2022 at 1:53 AM, TWesters said:

Thank you! The text is gone but it leaves a big empty clickable space. Any way to remove that?

 

All the best! /Tommy

Which space are you referring to?

Hi!

Thank you so much for helping me 🙂

I'd love it if the search result could look like this:

The full image and the title of the blog next to it

or, the title above or below it if next to it doesn't work

All the best!

Tommy

On 5/30/2022 at 12:25 AM, TWesters said:

Hi!

Thank you so much for helping me 🙂

I'd love it if the search result could look like this:

The full image and the title of the blog next to it

or, the title above or below it if next to it doesn't work

 

All the best!

Tommy

Can you share link to search result on your site?

Hi @tuanphan

Are you able to help as the codes here for search results in 3 grid layout don't apply for fluid.

https://flock-events-nz.squarespace.com/search?q=chair&f_collectionId=6422623f662db11f1212a646

Password: hls124

I've got as far as :

.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}
.search-results .search-result {
    float: left;
    width: 33%;
  
}

.sqs-search-page-item .sqs-main-image-intrinsic {border: 1px solid #000}

Thank you!! 🙂

On 3/30/2023 at 9:18 AM, MichelleHLS said:

Hi @tuanphan

 

Are you able to help as the codes here for search results in 3 grid layout don't apply for fluid.

https://flock-events-nz.squarespace.com/search?q=chair&f_collectionId=6422623f662db11f1212a646

Password: hls124

 

I've got as far as :

 

.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}
.search-results .search-result {
    float: left;
    width: 33%;
  
}

.sqs-search-page-item .sqs-main-image-intrinsic {border: 1px solid #000}

 

Thank you!! 🙂

Hi,

You want text appear under image or?

@tuanphan Text to appear under would be ideal.

Mobile is also showing images incredibly small.

Thanks!

On 4/6/2023 at 8:11 AM, MichelleHLS said:

@tuanphan Text to appear under would be ideal.

 

Mobile is also showing images incredibly small.

 

Thanks!

Don't remove any code in your current code.

Add this to Design > Custom CSS

@media screen and (min-width:768px) {
.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}
.sqs-search-container-item .sqs-content {
    padding-left: 15px !important;
}
}

Quote

On 11/13/2020 at 4:31 AM, tuanphan said:

@media screen and (min-width:641px) {
.search-results {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 10px;
}
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
    float: none !important;
    padding-right: 0 !important;
}
.sqs-search-page-item .sqs-main-image-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.sqs-search-container-item .sqs-content {
    margin-top: 10px;
}
.sqs-content .sqs-content {
    display: none;
}
.sqs-search-page-input {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background: #f1f2f3; /* search background */
}
}

 

This is an old post, of course, but I've been playing around with the CSS for my search bar and have employed this code. It mostly works for what I want it to do. It will take me to the results page and display those results with just the title as I'm expecting. But, if I search again from the bar on this results page, the ensuing results shown revert back to the standard format. Ideas on how to keep this code across all searches?

Despite my extremely limited knowledge, I've been experimenting with different CSS codes to format my search bar results a particular way. Something I've had mild success with. Ideally the result would show the product as well as a picture. Having pictures appear at this stage without renaming them all properly at this point is a non-starter. But, I have had success with just the title of my product listing showing as the result. This is where I then run into problems. If I then search for another item from the search bar on that results page, those results show in the original unadjusted format.

Would there be any possible assistance with a code that would show my search results as just the title of the listing(with picture, if possible), and have that format remain through all further searches?

my website is www.redherringbooks.ca and the password is redherringbooks.

On 6/7/2023 at 5:34 AM, TheZeppoTKH said:

Despite my extremely limited knowledge, I've been experimenting with different CSS codes to format my search bar results a particular way. Something I've had mild success with. Ideally the result would show the product as well as a picture. Having pictures appear at this stage without renaming them all properly at this point is a non-starter. But, I have had success with just the title of my product listing showing as the result. This is where I then run into problems. If I then search for another item from the search bar on that results page, those results show in the original unadjusted format.

Would there be any possible assistance with a code that would show my search results as just the title of the listing(with picture, if possible), and have that format remain through all further searches?

my website is www.redherringbooks.ca and the password is redherringbooks.

Can you share link to a search result page? We can check easier

On 6/6/2023 at 11:34 PM, TheZeppoTKH said:

Despite my extremely limited knowledge, I've been experimenting with different CSS codes to format my search bar results a particular way. Something I've had mild success with. Ideally the result would show the product as well as a picture. Having pictures appear at this stage without renaming them all properly at this point is a non-starter. But, I have had success with just the title of my product listing showing as the result. This is where I then run into problems. If I then search for another item from the search bar on that results page, those results show in the original unadjusted format.

Would there be any possible assistance with a code that would show my search results as just the title of the listing(with picture, if possible), and have that format remain through all further searches?

my website is www.redherringbooks.ca and the password is redherringbooks.

Your search results now appear like I'd like mine to. Can you share the solution please?

site https://whale-parsnip-3zzr.squarespace.com

pwd: origins

On 6/3/2024 at 6:23 PM, DebbieSapsed said:

Your search results now appear like I'd like mine to. Can you share the solution please?

site https://whale-parsnip-3zzr.squarespace.com

pwd: origins

Can you share link to a search result on example site or an image of your desired layout? We can help easier

The attached is what I get - the last image should be portrait,

URL is https://whale-parsnip-3zzr.squarespace.com/search - type snowdon in the search page 

Hi tuanphan.

I've just come back to see if there are any replies and realised there are two things going on here. I'm looking at options for doing search and the person I'm working for prefers a search bar in the header so I was working on that as a first preference. When I seemed to be getting nowhere with that I started experimenting with the search page but couldn't get it to show portrait images without cropping - I have another post about this.

Apologies for the confusion.

Debbie

P.S. I'm self taught in web development having taken on the site development for my "customer" who is a friend from church for whom I work pretty much free of charge. I have a bit of a programming background but my CSS knowledge doesn't extend to he complexities of Squarespace code.

On 6/6/2024 at 3:20 PM, DebbieSapsed said:

Hi tuanphan.

I've just come back to see if there are any replies and realised there are two things going on here. I'm looking at options for doing search and the person I'm working for prefers a search bar in the header so I was working on that as a first preference. When I seemed to be getting nowhere with that I started experimenting with the search page but couldn't get it to show portrait images without cropping - I have another post about this.

Apologies for the confusion.

Debbie

P.S. I'm self taught in web development having taken on the site development for my "customer" who is a friend from church for whom I work pretty much free of charge. I have a bit of a programming background but my CSS knowledge doesn't extend to he complexities of Squarespace code.

I see you added some CSS to fix this?

Normally I answer questions every 2 days, so every time you answer, you can expect my answer within 48 hours.

I tried but still couldn't fix it.