My product and collection images and titles are not aligned!

Highlighted
New Member
2 0 0

I am currently using the 'Simple' theme. My online store is soon to be launched but I am being held back due to an issues of professionalism. My store looks unprofessional because of these images being not aligned. I have tried to align them and am having no luck. Could anyone tell me how to do it withouth resizing all images?

0 Likes
Highlighted
New Member
2 0 0

UP please

0 Likes
Highlighted
Tourist
6 0 2

I have the same problem...

Shopify is saying they have Support for their themes, but, but, but, hello, where? They are just saying hire someone and stupid things like that. So why they are saying they offer support on forum, when you are asking something about coding in live chat. You have no support at all, here is a example. 

 

Edit// I was able to solve the problem on the home like that:

Go in your theme editor>Assets>theme.js and search this line "

$gridImages.css('height', 'auto').equalHeights(this);

add this under the first line

$('.product-grid-image~p').css('height', 'auto').equalHeights();


Worked for me on hompage but on the product page still doesn't work at related products tab... 

I'm using Supply Theme btw ! 

Oh... just now I see you are using Simple theme... Just try like that, replace .product-grid-image~p with supports-js~p
So you will have like that

$('.supports-js~p').css('height', 'auto').equalHeights();

Just try like that, it's worth, maybe will work.

0 Likes
Highlighted
Shopify Partner
60 0 9

The issue is that your images are not the same aspect ratio. You need to ensure they all have an equal ratio or the product titles will not line up.

In other words change them all to square and don't crop the white space. By cropping the white space you are changing the ratio from square to rectangular for some images.

0 Likes
Highlighted
Tourist
6 0 2

I have the same problem and the problem it's not because the images. You can have same image sizes but the title will don't align like the other grids.

 

On the homepage I was able to resolve the image and text alignment but on the product page I still have the problem too.

0 Likes
Highlighted
New Member
8 0 0

Thnak you your method fixed home page, however we need it for product pages.

 

any good news here 

0 Likes
Highlighted
Tourist
6 0 2

I tried a lot of hours by coding myself, by trying in a lot of ways and I was not able to repair that. I will try few more things and I will reply here if I will resolve it.

0 Likes
Highlighted
Tourist
6 0 2

Finally I find the problem, again, by myself, of course...

The problem is in the sections/product-template at the next line ( under it ): 

{% if section.settings.related_products_enable %}

The product-grid-image class doesn't have the height setted, I need to try to assign the height to this class and will be ok. 

 

Under the grid-item-width I tried to assign the height for the images, but didn't work...

 

    {%- assign image_size = '195x' -%}
    {% assign width = '195' %}
    {% assign height = '175' %}

 

If I will solve, I will come back with the full answer, if you can try by yourself ( if you know coding ), you're free.

1 Like
Highlighted
New Member
6 0 0

+1 on this problem , figured out the fix for the home page, but not collection pages

0 Likes
Highlighted
Tourist
4 0 0

cutting it into square is not feasible esp. if photos were taken close up.

0 Likes