#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;
    }
}

 

Buy me a coffee