#1. Horizontal Scroll
use this to Custom CSS
/* remove horizontal scroll */
section.region .row {
margin: unset !important;
}
section.region .row h3 {
padding: 0px !important;
}
#2. Quantity Add to Cart
use this to Custom CSS
/* 2a. Line up quantity */
@media screen and (min-width:768px) {
.product-add-to-cart {
padding-left: 20px;
padding-right: 20px;
}}
/* 2b. Quantity background */
#siteWrapper .product-quantity-input.custom-form-element {
background-color: transparent !important;
border: 1px solid #000 !important;
}
/* 2c add to cart quantity height */
#siteWrapper .product-quantity-input.custom-form-element {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
#siteWrapper div.sqs-add-to-cart-button-wrapper button {
margin: 0px !important;
height: 40px !important;
min-height: 40px !important;
}
#3. Add to cart under Description
use this to Custom CSS
/* 3. Mobile add to cart under description */
@media screen and (max-width:767px) {
.product-add-to-cart {
order: 5 !important;
}}
#4. Space
Use this to Custom CSS
#siteWrapper div.product-detail>div {
padding-bottom: 0px !important;
margin-bottom: unset !important;
}
#5. Align on mobile
/* align last art work browser index */
@media screen and (max-width:767px) {
section.region:nth-child(n+2) .columns-12>.row {
display: flex;
align-items: center;
justify-content: space-between;
}
}