Archived topic
Woocommerce Review Blocks
2 replies · Started by Luke on March 3, 2021
HI David, Im sorry to ask this here when its not strictly related to generatepress, but im really struggeling to sort the CSS using the new woocommerce blocks plugin. I cant get my head around what they are doing with the css for the images. If you compare these two links
reviews built using the new blocks plugin (scroll down)
https://valentte.com/blocks-test-page-luke/
reviews built using our old solution and which we would like to replicate.. (scroll down)
https://valentte.com/
Im tryiny to repliacte the rough formatting with a larger image and the review content floated to the right of the image. However i just dont understand the CSS that the new woocommerce plugin is using. I can make the image itself bigger, but cannot get the text to work nicely , especially the review itself which always sits down below the iamge with a massive amount of space between it and the header part fo the review.
Any help or pointers to understand whats happening with this display would be really apprecfiated.
Possible solution, but it uses negative margin to bring it upwards, is there a better way of doing this?
/* new woocomerce block reviews */
.has-image .wc-block-components-review-list-item__info {grid-template-columns: 143px 1fr!important;}
.wc-block-components-review-list-item__image {height: 120px!important;width: 120px!important;}
.wc-block-components-review-list-item__verified {right: 3px!important;}
.wc-block-components-review-list-item__text {margin-top: -65px;margin-left: 141px;}
Hi Luke,
Didn't see any reviews in your new site, have you had them removed?
Btw agree with you, the style of Woocommerce block can be difficult to deal with sometimes based on my personal experience. :)
