Product cards alignment

[xeliporit12]

As you can see, the price of each product is not aligned. I want it positioned at the bottom. How can I achieve this?

[BSSCommerce-B2B · Accepted solution]

@xeliporit12 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
 .card__content .card__information { 
     display: flex; 
     flex-direction: column; 
     justify-content: end; 
 }
</style>

[BSSCommerce-B2B · Accepted solution]

You can add this code after 

.card__content .card__information { 
     display: flex; 
     flex-direction: column; 
     justify-content: end; 
 }
 .card .card__media img {
    object-fit: contain;
 } 
 .card__content {
   flex-grow: unset;
 }
 .card__inner {
   flex-grow: 1;
 }

[BSSCommerce-B2B · Accepted solution]

Of course, you can add more this code

.card__inner {
  background: white!important;
}

Hope it helps 😍

[BSSCommerce-B2B]

@xeliporit12 , Can you kindly share you store url and password?

[xeliporit12]

@BSSCommerce-B2B, i've sent it in private chat 🙂

[BSSCommerce-B2B · Accepted solution]

@xeliporit12 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
 .card__content .card__information { 
     display: flex; 
     flex-direction: column; 
     justify-content: end; 
 }
</style>

[xeliporit12]

It worked! Thank you so much. Can you help me center the image please?

[BSSCommerce-B2B · Accepted solution]

You can add this code after 

.card__content .card__information { 
     display: flex; 
     flex-direction: column; 
     justify-content: end; 
 }
 .card .card__media img {
    object-fit: contain;
 } 
 .card__content {
   flex-grow: unset;
 }
 .card__inner {
   flex-grow: 1;
 }

[xeliporit12]

Work like a charm, but I would like the white background if possible please 🙂

[BSSCommerce-B2B · Accepted solution]

Of course, you can add more this code

.card__inner {
  background: white!important;
}

Hope it helps 😍

[xeliporit12]

You are the best man. I really appreciate that 😊 One last question how can i remove this part from my page ?

[BSSCommerce-B2B · Accepted solution]

@xeliporit12, use this code

.footer__copyright {
  display: none!important
}

[xeliporit12]

Thank you so much man! You've made it look amazing. I really appreciate your hard work 😊