Western Union exchange rate calculator,Stake Robbery.Recharge Every day and Get Bonus up-to 50%!

dannydandan123
(@dannydandan123)

4 years, 4 months ago
This seems like something fairly straightforward, yet I can’t come across a solution.
My store has images of different sizes / aspect ratios. While I realize this may not be ideal, I’m OK with that and would rather not resize them. I also do not want any solution that involves cropping them.
Here’s what this looks like now:

View post on imgur.com

Note how the “add to cart” buttons, descriptions, price are not aligned due to the different image heights.
What I’d like, is to center the images to the tallest one in the row, adding padding on top and bottom as necessary. Example here:

View post on imgur.com

Another option is to just set a fixed/max height, and have the browser crop the bottom on anything that goes over.

I’m 99% this is possible purely with CSS, with no cropping, image processing plug-ins etc.
Would really appreciate if someone could point me a solution.
Bonus if you can also help with the aligning the “add to cart” button when the product title has a varying number of lines.

Thanks in advance!!!
- This topic was modified 4 years, 4 months ago by dannydandan123.

Viewing 5 replies - 1 through 5 (of 5 total)

Senff
(@senff)

4 years, 4 months ago

Hi @dannydandan123

Depending on your theme, this is likely possible to do with CSS, though we can’t check that just from screenshots. Are you able to share a link to your site so we can take a look and see what code would help here?
Thread Starter dannydandan123
(@dannydandan123)

4 years, 4 months ago
Hey,

Thanks for responding so quickly!
I’m currently using Astra but also experimenting with Storefront. I’ve had the same issue on both.
You can see the issue here (it’s in Hebrew and using RTL, but I don’t think that’s related to the problem):
https://electricdirect.co.il/product-category/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%95%d7%90%d7%a4%d7%99%d7%94/%d7%9b%d7%99%d7%a8%d7%99%d7%99%d7%9d-%d7%92%d7%96/
- This reply was modified 4 years, 4 months ago by dannydandan123.
Senff
(@senff)

4 years, 4 months ago
For Storefront, you can add the following code:
```
@media screen and (min-width: 768px) {  
  ul.products {
    display: flex;
    flex-wrap: wrap;
  }
   
  ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   
  ul.products li.product .button {
    align-self: center;
  }
}
```
Thread Starter dannydandan123
(@dannydandan123)

4 years, 4 months ago

Thanks!
With all the different options to add custom CSS, where should I put this in?

Senff
(@senff)

4 years, 4 months ago

Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. You can then enter the custom CSS code in the textbox on the left, and select “Save Changes” from the top.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Center images around tallest one in product gallery’ is closed to new replies.