Border around product row

  • I have one product per row in my store.
    I am trying to add a border to the products so that the next and previous products get distinguished clearly.
    I am using the following code: 

    add_action( 'wp_head', function () { ?>
<style>
.woocommerce ul.products li.product {
width: auto;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 10px;
text-align: center;
margin-bottom: 25px;
}
</style>
<?php } );

    This is adding a border to the product on the desktop site but on the mobile device display, it is adding the border to the image only. The image title and price info are outside the border. I want to have everything inside the order.
    Please help me with the correct CSS.
    Desktop view (displaying as expected): https://imgur.com/2XxVMZf
    Mobile view: https://imgur.com/QioFjoc

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support RK a11n

    (@riaanknoetze)

    Hi there,

    Thanks for those screenshots – that help a great deal.

    Seeing as the necessary CSS varies from one site to the next, we’d need to take a closer look at the underlying markup itself. Can you share a direct URL to the page where those products are shown?

    Thanks!

    Thread Starter amoalsale

    (@amoalsale)

    Hi @riaanknoetze
    Thanks for your reply.
    Here is the link to the website: https://ekrushak.com/
    You can try opening it on a desktop and then on a mobile device.
    On the mobile view product name, price and weight go outside the border.

    • This reply was modified 4 years, 3 months ago by amoalsale.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Border around product row’ is closed to new replies.