Move Product section UP & Resize Product Item for Mobile

1. (see attached image) how can I move the Producct section up to be in line with the image?

2. I enabled waitlist via selling tools > waitlist > settings > "allow waitlist sign ups".
how do i resize the email address field and sign-up button to be the same width as the info below it? 

because its currently creating some blank space on the right side when viewing on mobile. 

3. See the second screenshot, on mobile

how do i move the "description"  to the "sizing chart" section closer to the "elevate" text? while keeping the "you might also like section below with some space between.

&

4. on mobile too,

how do you make the "description" to the "sizing chart section" width take up the max width/length of webpage on mobile?
also the "add to cart" button on an item thats not sold out 

link: 
https://lavender-oval-sydh.squarespace.com/shop/p/best-friend-minimal-t-shirt-4. <-- sold out  item page
https://lavender-oval-sydh.squarespace.com/shop/p/best-friend-minimal-t-shirt-3 <-- none sold item out page

pw to site: help

template: spotted

7.1

Trial

@Web_Solutions friend that's exactly what I needed! thanks very much.

just one more thing please - all on mobile.

1. for items in stock is there any way to also make the add to cart button also full width?(more to the right as there's still some space there) - on the mobile
2. How can I adjust the size of the add to cart button on mobile (make it a bit thinner-height wise) -on mobile
3. "description" to "sizing chart" section(think its called product item additional) how can i shrink the size of that section on mobile only to make it smaller? 

1 hour ago, WhoAJ said:

@Web_Solutions friend that's exactly what I needed! thanks very much.

just one more thing please - all on mobile.

1. for items in stock is there any way to also make the add to cart button also full width?(more to the right as there's still some space there) - on the mobile
2. How can I adjust the size of the add to cart button on mobile (make it a bit thinner-height wise) -on mobile
3. "description" to "sizing chart" section(think its called product item additional) how can i shrink the size of that section on mobile only to make it smaller? 

Replace the previous code with the code below. 

.view-item .ProductItem-summary {
    align-items: flex-start !important
}

.ProductItem-summary .product-restock-notification {
    width: 90% !important
}

.view-item .ProductItem-summary .product-restock-notification [name="email"] {
    min-width: 10px !important;
    box-sizing: border-box !important
}

@media (max-width: 767px) {
    .view-item section.ProductItem-additional,.view-item .ProductItem-summary .product-restock-notification, .view-item .ProductItem-details .sqs-add-to-cart-button-wrapper  {
        width:100% !important
    }

    .view-item .ProductItem-details-excerpt,.view-item .ProductItem-additional, .view-item .product-mark.sold-out{
        margin: 0 !important
    }
    .ProductItem-additional .accordion-block *{
        font-size: 12px !important;
    }
    .view-item .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
        font-size: 14px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}