Currently My Price Elements are unaligned. I am trying to align them no matter the size of the title above them. I have tried different methods using Flexbox to get this result, but have not figured out a solution. Current Progress below. This is what it currently looks like Current styles Any Direction would be appreciated.
// Product
li.product {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
width: calc(100% - #{$base-spacing});
margin: 0 $base-spacing/2 $base-spacing;
padding: em($base-spacing);
background: $white;
text-align: center;
transition: all $base-duration $base-timing;
border: 5px solid transparent;
// Sale Icon
span.onsale {
background-color: $primary-color;
height: 4em;
width: 4em;
display: flex;
justify-content: center;
align-items: center;
}
// Product Image
img {
width: auto;
margin: 0 auto;
margin-bottom: em($base-spacing);
transition: all $base-duration $base-timing;
height: 220px;
}
// Product Name
h2.woocommerce-loop-product__title {
margin-top: 0;
padding: 0 em($base-spacing);
font-family: $base-font-family;
font-weight: 700;
text-transform: capitalize;
font-size: em(18);
color: $base-font-color;
}
// Price
.price {
font-size: em(22);
color: $primary-color;
margin-top: $base-spacing/2;
}
@include xs-up() {
width: calc(50% - #{$base-spacing});
}
@include md-up() {
width: calc(33.3% - #{$base-spacing});
}
&:hover,
&:focus {
border: 5px solid $primary-color;
//a.add_to_cart_button {
// background-color: $secondary-color-dark;
//}
}
.button.add_to_cart_button,
.button.product_type_simple,
.button.product_type_external,
.button.product_type_grouped,
.button.product_type_variable {
position: relative;
margin-top: $base-spacing*2;
@include hollow-button();
@include md-up() {
float: none!important;
}
}
// target external products
&.product-type-external {
.button {
white-space: normal;
}
}
// target grouped products
&.product-type-grouped {
}
// target variable products
&.product-type-variable {
}
}<li
class="product type-product post-18183 status-publish first instock product_cat-halloween-masks product_cat-horror-movies has-post-thumbnail taxable shipping-taxable purchasable product-type-simple">
<a href="https://screamerscostumes.test/product/a-nightmare-on-elm-street-deluxe-freddy-krueger-mask-with-fedora-hat/"
class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="300" height="369"
src="https://screamerscostumes.test/app/uploads/2021/10/RLWB106-noes-freddy-withhat-1-300x369.jpg"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt=""
srcset="https://screamerscostumes.test/app/uploads/2021/10/RLWB106-noes-freddy-withhat-1-300x369.jpg 300w, https://screamerscostumes.test/app/uploads/2021/10/RLWB106-noes-freddy-withhat-1.jpg 499w"
sizes="(max-width: 300px) 100vw, 300px">
<h2 class="woocommerce-loop-product__title">A Nightmare on Elm Street – Deluxe Freddy Krueger Mask with Fedora
Hat</h2><span class="price"><span class="woocommerce-Price-amount amount"><bdi><span
class="woocommerce-Price-currencySymbol">$</span>99.99</bdi></span></span>
</a><a href="?add-to-cart=18183" data-quantity="1"
class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="18183"
data-product_sku="RLWB106"
aria-label="Add “A Nightmare on Elm Street - Deluxe Freddy Krueger Mask with Fedora Hat” to your cart"
rel="nofollow">Add to cart</a></li>