Debut theme image alignment

Highlighted
New Member
7 0 0

Hi,

I've got images that are of different dimensions due the type of products. Some are tall, and some are wide. This causes the products in the collection page to be misaligned. Everything is flushed to the top, and following it is the product name and price. This makes the whole layout look really wonky.

Anyone knows how to align all images to the bottom so that the product name and prices can be aligned? Tried fidding the theme.scss.liquid but nothing seems to be working.

Thanks in advance.

E

 

0 Likes
Highlighted
Shopify Partner
17 2 5

Hi Ericson

For the best results, you can place your images in a fixed size template in Photoshop (or your favorite program). At least you'll always know everything is the same size.

You have some other options too:

You can try setting a min/max height & width to your images. The class you're looking for is .grid-view-item__image

The reason that your seeing the shifty misalignment is because the images/price's parent div container with the class .grid__item.  They are all floating to the left and by default vertically aligned to the top.

Which then means the other option is to try adding this to your css

.grid__item--collection-template {
    float: none !important;
    display: inline-block;
}

This will break the float method and align everything to the bottom. If it doesn't, try adding vertical-align:bottom; to the CSS above.

Let me know how that works out.

-Rob

RWH Studios - Shopify & WordPress eCommerce Designers & Developers
0 Likes
Highlighted
Excursionist
19 2 1

Hello Rob

 

I saw this response dating back go 2017. I too have this issue, but two years on. I think the code has been updated since you replied. Could you suggest where I should look now for the same outcome?

Thanks in advance

0 Likes
Highlighted
Tourist
15 0 3

Hi Rob,

hope you are doing well. I have the same problem with images and added the code below to my theme.scsc.liquid, but nothing changes with the allignment. Is the code still working with debut theme?

 

.grid__item--collection-template {
float: none !important;
display: inline-block;
vertical-align:bottom;
}

 

Best regards& Thanks

0 Likes
Highlighted
New Member
1 0 0

Hi all.

I realise this thread is a bit old and recently brought back by, but hoping to get some feedback here.

I'm using the Debut theme and needed to align the Collection Grid Images. Thanks to @Rob_Hinch's post above, I was able to insert that code into the theme.scss.liquid and it worked. However it also broke the "Number per Row" of the grid.

My Grid is set to 5 Per Row, but with this code it only shows 4. It doesn't alter the alignment though, so the Grid is still aligned left, meaning that there is a big ugly white space on the right of the page:

 

I did some troubleshooting and determined that the line that is causing this issue is the same line that seems to align the grid items:

  float: none !important;

My knowledge and experience with CSS is minimal at best. Can anyone provide me any guidance on resolving this issue?

Thanks
Naz

 

0 Likes
Highlighted
New Member
1 0 0

hi all!

Open Snippet -> product-card-grid.liquid and paste this code on the bottom, if un want changue flex-end to center or flex-start.

{% unless product.featured_image == blank %}
	{% assign this_ar = 1 | divided_by: product.featured_image.aspect_ratio | times: 100 %}
{% else %}
	{% assign this_ar = 100 %}
{% endunless %}
<!-- {{ this_ar }} : {{ max_ar }} -->
{% unless max_ar > this_ar %}
	{% assign max_ar = this_ar %}
{% endunless %}
{% if forloop.last %}
	<style>
      .grid-view-item__image-wrapper {
        padding-top: {{ max_ar -}}% !important;
        max-height: none !important;
      }
      .grid-view-item__image-wrapper div {
        padding-top: 0 !important;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* can use flex-start, center and flex-end here */
      }
      .grid-view-item__image-wrapper .grid-view-item__image{
        position: static;
        top: auto;
      }
	</style>
{% endif %}

 

0 Likes
Highlighted
Shopify Partner
12 0 0

Hey Andres - I just came across your solution and it worked really well for aligning the elements! However, there is a really big gap - like 500px or so between the rows. How can I remove that?

0 Likes
Highlighted
Tourist
7 0 1

Hi all,

This code works perfectly indeed ! Bus I have the same proble as Joe_Lowery, the gap between the rows is huge and I have tried to modify the code but I could not find a solution !

Your help would be really appreciated!

Thank you 

Swan

0 Likes