Why are search results misaligned on certain pages?

Technical Q&A
1

When I search something, (in this case “TOMY”) I have a issue where for this search for example on page 4 & 5 the search results are out of line

Here’s a link to my website (on page 3 of “TOMY”) https://kaikkistore.com/search?page=4&q=tomy&type=product

The code for my search results are here:

{% paginate search.results by 12 %}

  {% if search.performed == false %}
    

      # {{ 'general.search.title' | t }}
  {% else %}
    
      # 
        {{ 'general.search.heading' | t: count: search.results_count }}:
        {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
      
  {% endif %}
      
        

          
        

      

      {% if search.performed and search.results_count == 0 %}
        

---

        
          

{{ 'No results were found, please try another search.'}}

        

      {% endif %}
  

{% if search.performed %}
  {% if search.results_count > 0 %}
    

---

  {% endif %}
  ## {{ 'general.search.heading' | t: count: search.results_count }}
  
    {% for item in search.results %}
      - {% if item.object_type == 'product' %}
              {% include 'product-card-grid', product: item %}
            {% else %}
            

              
                  {{ item.title }}
              
              

                  {% if item.image %}
                  

                    

                      
                    

                  

                  {% endif %}
                
                  

                      {{ item.title }}
                  

                  
                      {% if item.published_at %}{{ item.published_at | date: format: "date" }} — {% endif %}
                      {{ item.content | strip_html | truncate: 200 }}
                  

                

              

            

            {% endif %}
      
    {% endfor %}
  

  {% if paginate.pages > 1 %}
    {% include 'pagination' %}
  {% endif %}
{% endif %}
{% endpaginate %}
2

Hi,

I think the problem youve got is that the name of your Gordon train toy is shorter than the others so the overall height of that box is smaller than the others on that line, as the items are in divs that are floated next to each other its making the next div to be floated position itself just under the gordon item as there is space there for it.

A couple of solutions:

  1. Easiest is to just add a few words to the name of your Gordon item so it goes onto 2 lines like your other products. This would be a quick fix but not ideal as it may affect other items.

  2. You could force the overall height of the div to be a certain height which would account for the different heights of the names. Try something like this in your CSS:

.grid__item {height:366px}

Might be better to use vw as the units and then it would be responsive tothe window widdth too.

  1. Another way to do it would be to add some java to check the heights of all the elements with the class name of .grid_item and then set all the heights to the height of the tallest element. Sorry Ive not got time to do the java for you but if your still stuck I could add it later.

  2. Another way would be to add a counter within the liquid file which increments each time an item is added, once the counter hits 4 then echo a div with the style of clear:both which would in effect create a break between each line. This would only be usefull if you always have 4 per row and youve have to change it manually if there were a different number per row

3

Hi @PastorClez ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:

.template-search .main-content .page-width.grid {
display: flex !important;
flex-wrap: wrap !important;
}

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.