проблема woocommerce, чтобы сделать страницу продукта отзывчивой

Привет и спасибо заранее. У меня есть этот сайт NSFW (возможно, романтические электронные книги с некоторыми горячими изображениями) https://sitetest.wigigx.com/mf-romance/

Мне удалось создать шорткод и функцию для отображения отрывка рядом с обложкой электронной книги Только на этой странице (конечно, с помощью созданного шорткода), НО настоящая проблема в том, что я не могу получить отрывок, цену, название и звездочку. рейтинги ориентированы по центру и отзывчивы, а также соответствуют размеру контейнера, чтобы он идеально соответствовал размеру изображения.

Удалось ввести отрывок, "поднять" заголовок )раньше был внизу) и оставить некоторый запас между изображением и текстом, но мне нужно

-Получить заголовок вверху по центру

-Тогда отрывок по центру

-затем звездный рейтинг

-наконец цена

- и кнопку «Получить сейчас» внизу. Все центрировано, выровнено и отзывчиво.

Я также добавил рамку к заголовку, чтобы «увидеть» и отредактировать его.

вот код до сих пор, есть идеи?

/*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;
}

заранее спасибо


css woocommerce styles storefront
person Community    schedule 26.07.2019    source источник
comment
У меня были некоторые наработки, почти все решилось, кроме того, что поставить Цену внизу, почему-то порядок не работает ни CSS, ни PHP, продолжайте пробовать   -  person    schedule 30.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

здорово! Я смог решить это с помощью CSS

• Изменено float: слева от заголовка для отображения: встроенный блок

/*Change Title color and float text to left*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.productsli.product h3{
olor: #cc5588;
display: inline-block;
    width: auto;
}
•   SOLVED added padding: 10px to image - make some space between image and text
/*Float image to the left*/
ul.products li.product img {
    float: left;
    padding: 10px;
}

спасибо

person Community    schedule 30.07.2019