How can I fix CSS issue with unaligned product listings?

Technical Q&A
1

Hi everyone,

Can anyone help me with the style issue.

jaysig_1-1657909554418.png
jaysig_1-1657909554418.png1250×571 107 KB

https://shop.signaturemedispa.com/

As you could see my attached image that is showing the third product of new arrival products are not in a horizontal line because the 3nd product has a longer name.

What is the best way to resolve it? Do you have any ideas?

Thank you @MarinaPetrovic for your last help, I am not sure if you could do me a favor again!

Thank you in advance,

Jay

2

Hi @jay-sig ,

This is because the third card has two lines of title. You can correct the alignment by using the code below.

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the theme.css file.
  3. Add the code below.
.home-products .home-products-content {
    display: flex;
}
3

Hi @made4Uo

Thank you for you quick reply.

Yes, the issue was caused by the longer title of 3nd card.

I tried your answer, the top seams like in a line but bottom is not.

jaysig_0-1657916227611.png
jaysig_0-1657916227611.png1282×564 109 KB

How can I make the four cards align up and down. for example as below,

jaysig_1-1657916469107.png
jaysig_1-1657916469107.png1088×461 91.5 KB

Thank you,

Jay

4

Hi @jay-sig ,

You can use the following codes instead.

@media only screen and (min-width: 750px) {
.home-products .home-products-content {
    display: flex;
}

.product-list-item.has-quick-shop {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
}
5

Hi @made4Uo ,

Thank you sooooo much!

You not only showed my the answer, but also showed me an idea to solve these kind of issues.

Thank you,

Jay