时间戳

首页 > 解决方案 > woocommerce问题使产品页面响应

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

提前致谢

标签： csswoocommercestylesstorefront

解决方案

伟大的！我能够用一些 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;
}

谢谢

推荐阅读