How to get bordered layout on related product section?

This topic has 5 replies, 2 voices, and was last updated 2 years, 6 months ago ago by Sadikul Islam

  • Avatar: Sadikul Islam
    Sadikul Islam
    Participant
    June 2, 2022 at 18:45

    Hi, How do i get bordered layout like shop page in the single product page on the related product section??
    Like this bordered layout https://media.d.pr/ozLEls
    on the single product page related product grid.

    Thank you.

    4 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 3, 2022 at 07:16

    Hello,

    Provide URL, please.

    Regards

    Avatar: Sadikul Islam
    Sadikul Islam
    Participant
    June 3, 2022 at 10:04
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 3, 2022 at 10:13

    Try to use the next custom CSS code:

    .related-products .product {
        border-bottom: 1px solid var(--et_border-color);
        border-right: 1px solid var(--et_border-color);
        display: flex;
        justify-content: center;
    }
    .related-products {
        border-top: 1px solid var(--et_border-color);
        border-left: 1px solid var(--et_border-color);
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
    .related-products .content-product {
        flex-direction: column;
        justify-content: normal;
        display: flex;
        flex: 1;
    }
    .related-products .content-product .product-details {
        padding-bottom: 0px;
    }

    Regards

    Avatar: Sadikul Islam
    Sadikul Islam
    Participant
    June 3, 2022 at 10:48

    The Code works Awesome. Thank you for your hard work

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘How to get bordered layout on related product section?’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.