wooommerce problem to make a product page responsive

I managed to create a shortcode and a function to get an excerpt displayed next to the eBook cover Just in this page (of course via the created shortcode) BUT the real problem is that I can`t get the excerpt, price, title and star ratings centered and responsive and to fit the container so it align perfectly to the image size.

I managed to enter the excerpt, to “lift” the title )before was at the bottom) and to have some margin between image and text, but I need to

-Get the Title top centered

-Then the excerpt centered

-then the star rating

-finally the price

-and the Get it now bottun at the bottom All centered, aligned and responsive.

I also put some border to title to “see it” and edit ite

here the code so far, any idea?

/*Float image to the left*/
ul.products li.product img {
    float: left;
}

/*Add hover to image*/
a:hover img { 
    border:solid #eeccdd 5px;
}

/*Change Title color and float text to right*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3{
    color: #cc5588;
    float:right;
    width: auto;
}

/*Center Excerpt and price and Button Get it now*/
ul.products li.product{ text-align: center;
}

/*Lift Up title*/
.beta, h2 {
    clear: none;
    display: flex;
}

Thanks in advance

The page I need help with: [log in to see the link]