Resize product list on mobile to be more compact

Hi team,

I need help resizing the form on the mobile view to be more compact.

I followed a previous post here which helped me a lot however I want to make some revisions to further improve its compactness.

Is it possible to do the following?

1. Move the product title and pricing so it aligns at the top
2. Remove the word "quantity" in the quantity selector
3. Resize the quantity selector to become smaller
4. Relocate the quantity selector to the bottom right
5. Preferably all the information to be displayed at the same height as the product picture
6. Current CSS from this post has disabled the ability to click and expand and view the product picture, is it possible to enable it?

Hello,

You can try adding in this.

@media screen and (max-width: 415px) {

    .form-sub-label {

        display: none !important;

    }

    .p_image {

        z-index: 1;

    }

    .form-product-container {

        padding: 0 !important;

    }

    .form-sub-label-container {

        float: right !important;

    }

}

You run into problems at certain resolutions if you move the dropdown up as it will cover up text on some devices so I'm not sure if you want to do that or not. The following instead of just float right will make it look correct on some screens but you'd need to take it off for smaller if you didn't want it overlapping.

    .form-sub-label-container {

        float: right !important;

        position: relative;

        top: -25px;

    }