how to style search result page custom css

Hello!

Is there anyway to customize search result page? I have Rally template. I would like to have only photos in search result, without any titles, texts or anything. Does anyone know how to hide them?

@Katariina123 Add to Home > Design > Custom CSS

.sqs-search-page .sqs-main-content {
    display: none;
}

That code didn't do anything!

@Katariina123 Can you share your search page url?

https://wrasse-asparagus-s4ws.squarespace.com/

Password: kirsi

Search for example "beach".

Especially in mobile, the pictures are super small, but as you can see, the point of the website is images, so I would like to hide titles and tags and any text  from search, and have bigger images.

Thank you so much!

Add to Home > Design > Custom CSS @Katariina123

/* Hide all content, title */
.search-results .sqs-content {
    display: none;
}
/* Image size */
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
}
.search-results .search-result {
    float: left;
    width: 33%;
}

Thank you so so so much! It looks much better now!

If you are still interested in working with this, the mobile doesn't really work, it shows filenames, and the view gets scrambled. It sometimes does it also in desktop.

example, with the tag "nature", it gets scrambled after "show more"

.sqs-search-page-more-wrapper {
    display: none;
}

Hi @tuanphan

I have a similar question and wondering if you could help me.

I’m using the Clay template and I would like to customize the search result page - like Katariina123  I would like to have only photos in search result, but WITH titles and excluding everything else such as description texts, filenames etc.. so only show image + title, nothing else- is it possible? Thank you.

Did you find an answer to this? I'd like search results to only display the title.

On 10/29/2019 at 6:36 AM, tuanphan said:

Add to Home > Design > Custom CSS @Katariina123

/* Hide all content, title */
.search-results .sqs-content {
    display: none;
}
/* Image size */
.sqs-search-page-item .sqs-main-image-container {
    width: 100%;
}
.search-results .search-result {
    float: left;
    width: 33%;
}

 

Hi @tuanphan it didn't work for my site www.abitorange.com - I want to have pictures and titles of products only.. 

22 hours ago, OrangeKhan said:

Hi @tuanphan it didn't work for my site www.abitorange.com - I want to have pictures and titles of products only.. 

Can you share link to a search result page?

3 hours ago, tuanphan said:

Can you share link to a search result page?

 

https://www.abitorange.com/search?q=p2p

On 8/22/2021 at 6:31 PM, OrangeKhan said:

https://www.abitorange.com/search?q=p2p

I just checked the code structure of the search page. It doesn't return an image, so there's no way to achieve your request. The image is not showing, not sure if it's the default setting of the template, or the problem from SS. Try contacting SS Customer Care to ask about this.

@tuanphan is there a way to make the image size larger on just a mobile? 

The below code works for me responsively but is there a way to make it 100% on mobile view only?

/* Image size */
.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}

On 12/8/2021 at 12:31 PM, The-Design-Order said:

@tuanphan is there a way to make the image size larger on just a mobile? 

The below code works for me responsively but is there a way to make it 100% on mobile view only?

/* Image size */
.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}

Edit to this code

@media screen and (max-width:767px) {
/* Image size */
.sqs-search-page-item .sqs-main-image-container {
    width: 100% !important;
}
}