Hi @Anas,
Please try adding the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
.woocommerce-checkout tr.woocommerce-shipping-totals.shipping {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.woocommerce-checkout tr.woocommerce-shipping-totals.shipping td {
padding: 0;
}
.woocommerce-checkout ul#shipping_method > li {
flex-wrap: wrap;
justify-content: start !important;
width: 100%;
border: 1px solid #f0f0f0;
margin-bottom: 15px;
padding: 10px;
border-radius: 8px;
}
.woocommerce-checkout ul#shipping_method li label {
margin-bottom: 0;
}
.woocommerce-checkout ul#shipping_method li div.el-alert {
flex-basis: 100%;
width: 100%;
}
.woocommerce-checkout ul#shipping_method li div.el-alert li {
display: inline-block;
text-align: left;
}
.woocommerce-checkout ul.el-alert-body > ul {
padding-left: 0;
width: 100%;
}
Hope it helps!