woocommerce问题使产品页面响应答案

【问题标题】：woocommerce problem to make a product page responsivewoocommerce问题使产品页面响应
【发布时间】：2019-12-05 03:31:32
【问题描述】：

您好，提前致谢。我有这个 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 还是 PHP 都不起作用，继续尝试

标签： css woocommerce styles storefront

【解决方案1】：

太棒了！我能够用一些 CSS 解决它

• 更改浮动：从左到显示标题：inline-block

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

谢谢

【讨论】：