【问题标题】: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;
}

谢谢

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-12-11
    • 1970-01-01
    • 2017-06-14
    • 2015-03-05
    • 1970-01-01
    • 2016-08-23
    • 2020-08-20
    • 1970-01-01
    相关资源
    最近更新 更多