HELP: Product Columns Messed Up

Solved
New Member
3 0 0

Hello everyone, my first post on here so I apologize if I missed something!

 

I have recently launched my new store at beardoctane.com.  On the home page under the "Featured Products" section and on the product Collections pages, the rows are messed up.

 

For example, on the product collections page, it should display 3 columns of products.  However, the top row only displays just the 1 product, then on the second row and below, it seems to display properly.  

 

Screenshot for front page "featured products": https://tinyurl.com/t96cppc

Screenshot for product collections page: https://tinyurl.com/uvdmwrr

 

I am not sure if an app messed this up, or?  Any/all help would be greatly appreciated, as it's throwing the look of my store way off.

 

cheers,

joe

 

 

0 Likes
Tourist
18 0 2

Hello  

 

I have check your site using inspect element i have trysomething and its work perfectly please  check below code

 

1) use below class in product div (replace one-fifth to one-quarter )
replace div class
    <div class="grid__item grid__item--1511986910645 small--one-half medium-up--one-fifth"></div>

to

<div class="grid__item grid__item--1511986910645 small--one-half medium-up--one-quarter">
</div>

2) Add below css in theme.scss.liquid file

@media only screen and (min-width: 750px)
.medium-up--one-quarter {
    width: 30%;
}

image1.png

0 Likes
New Member
3 0 0

@deepa3 wrote:

Hello  

 

I have check your site using inspect element i have try something and its work perfectly please  check below code


 

The Featured products should be 1 row of the 5 products, instead of the 2 rows that is displaying.  Unless you're seeing something different?  I will check that code now.  Greatly appreciate you taking the time to help!

0 Likes
Tourist
18 0 2

Hello 

you want like belowimage1.png

use below css

@media only screen and (min-width: 750px)
.medium-up--one-quarter {
    width: 20%;
}
0 Likes

Success.

Shopify Partner
100 20 17

Hi @BeardOctane ,

Hope you are doing well,

I noticed that there are some json data inserted between the product columns. if you remove or comment the json data script from the product-grid snippet than it will solve your issue.

 

If it is not solve your issue than tell me which theme you are using. that is easy for me to told you that where will you have to change the code.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
New Member
3 0 0

This was the solution, thank you so much! 

 

{% comment %}<script type="application/json" class="bold-product-json">
{{ product | json }}
</script>{% endcomment %}

0 Likes