Debut Theme Search Result Grid

Solved
Highlighted
Excursionist
15 0 5

I applied that and saved the page, it fixed the issue, however it decentered the price (now alligned to the left) 

 

For some reason it seems that every fix I apply, breaks something else :(

0 Likes
Highlighted
Excursionist
15 0 5

This is what I have for the product price in theme.liquid

 

.product-card, .grid-view-item .price { margin-left:2px; text-align: center; justify-content: center; display: block; }
0 Likes
Highlighted
Tourist
7 0 1

Hello! 

I am interested in having the search results appear in a grid view as well. I used the codes you mentioned before and they worked for me (thank you!), but when I search, spaces appear in between the results. Do you know of any way to fix this? I am using the debut theme and my site is acsaesthetic.com

Screen Shot 2020-06-24 at 1.32.20 PM.png

1 Like
Highlighted

Hi averys823,

Nice looking store! Try adding the following to your theme.scss file:

.template-search .product-card{
   height: 430px;
}

What this does is set every product card to 430px only on the search page. Something to keep in mind, if you add a new product that has a very long name it may run over into the next product card. For simplicity, try to keep your product titles and images around same size to keep things uniform.

Let me know if that helps!

Kyle 

0 Likes
Highlighted
Tourist
7 0 1

Yes this got rid of the spaces, thank you!! It looks like the products are still not filling up the whole grid, though.

Screen Shot 2020-06-24 at 1.51.07 PM.png

If you have a fix for this that'd be great, but I have another issue now that I really need a solution for:

I don't know if this is from changing this code, but my product photos that are not from the search results have all been compressed to squares when they are normally 3:4 or 2:3. They look normal in the search results, but when you see them from the home screen, a collection, drop down menu, etc they are all square. Do you have a solution for this?

Screen Shot 2020-06-24 at 1.50.41 PM.png

Thank you!!

0 Likes
Highlighted

Great!

In your theme.scss file edit the following:

//Change This
.
grid-view-item__image-wrapper{
max
-width: none !important; } .grid-view-item__image{
max
-width: none !important; }

//To this
.template-search .grid-view-item__image-wrapper{
max
-width: none !important;
}
.template-search .grid-view-item__image{
max
-width: none !important;
}

 and see let's see! 

0 Likes
Highlighted
Tourist
7 0 1

That worked! Thank you so much for your help!!

0 Likes