Woocommerce problem to make a custom product page responsive

Hi and thanks in advance. I have this NSFW site (romance eBooks with some hot images maybe)

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.