Currently, I am working on an e-commerce project using React/Redux. The project utilizes Flexbox for layout and design. While I have a good understanding of React, CSS3 flexbox is still new to me. Specifically, I am struggling with aligning some elements in the layout. Below you will find my React code, SCSS code, as well as both the expected and actual designs. Any assistance in achieving this layout would be greatly appreciated. Thank you in advance.
The main challenge lies in positioning the item (AED 325 above the quantity) using Flexbox.
CSS Code
.modalHeaderWrapper {
display: flex;
width: 100%;
height: 50%;
flex-direction: row;
border-bottom: solid 1px $color-border;
.left {
flex: 3;
background-color: $color-bg-primary;
}
.right {
flex: 1;
flex-direction: column;
background-color: $gray-bg;
border-top: 1px solid $_greyLight;
border-right: 1px solid $_greyLight;
border-left: 1px solid $_greyLight;
.modalCartSummary {
text-align: center;
margin-top: 30px;
}
}
}
.aed {
font-size: 20px;
font-weight: lighter;
color: $_offBlack;
}
.productBox {
display: flex;
flex-direction: row;
width: 100%;
.modalProductName {
font-size: 14px;
color: $_offBlack;
text-align: left;
line-height: 17px;
}
}
.modalProductSummary {
padding: 10px 20px;
}
.shippingSellerWrapperModal {
font-size: 12px;
margin-top: -13px !important
}
.modalImage {
height: 74px;
width: auto;
margin-left: 17px;
}
React code
<div className={styles.modalHeaderWrapper}>
<div className={styles.left}>
<div className={styles.type}>
<div className={styles.productAddTitle}>
<Icon name="radio-checked" className={styles.check} />
</div>
</div>
<div className={styles.productBox}>
<div>
<img src="{Helper.getTransformationUrl(product.image_keys[0])}" className={styles.modalImage} alt="new"/>
</div>
<div className={styles.modalProductSummary}>
<div className={styles.modalProductName}>
{product.product_title}
</div>
<div className={styles.reviewbadge}>
<div className={styles.reviewCtr}>
<ProductReviewsBadge
reviewData={this.props.reviewsSummary}
/>
</div>
</div>
{this.renderProductSubComponent('shippingEstimator', product, offer)}
<div className={styles.shippingSellerWrapperModal}>
</div>
</div>
<div className={styles.qntAndPriceBlock}>
AED 325
{I18n.getText('cart.cart-modal-qty', {qty: quantity}, 'quantity {qty}')}
</div>
</div>
</div>
<div className={styles.right}>
<div className={styles.modalCartSummary}>
<p className={styles.itemsNumber}>
'your cart has worth
</p>
<span className={styles.aed}>
AED
</span>
<span>
<strong className={styles.value}>
{I18n.formatCurrency(this.props.cartSummary.grandTotal.value)}
</strong>
</span>
</div>
<div className={styles.btnWrapper}>
<Button className={styles.modalBtn} onClick={() => browserHistory.push('/' + this.props.locale.locale)}>
{I18n.getText('account.profile-address-cancel', {}, 'VIEW CART')}
</Button>
<Button className={styles.modalBtn} variant="transparent" onClick={this.closeModal}>
{I18n.getText('account.profile-address-cancel', {}, 'CONTINUE SHOPPING')}
</Button>
</div>
</div>
</div>
Actual Outcome
https://i.sstatic.net/lIWKa.png
Expected Outcome
https://i.sstatic.net/esom2.png
Responsive view