Woocommerce product widget issue on mobile devices

  • Resolved surgimedex.webmaster

    (@surgimedexwebmaster)


    9 years, 4 months ago

    Hi folks,
    I added a woocommerce products widget at my website’s homepage : https://www.surgimedex.in

    at first the products were coming as vertical and i used following custom css to make it horizontal.it now looks ok on PC but when i tried it on a android smartphone i noticed an issue. The price text is overlapping with the product name. What can i do to fix this issue ?

    using this css i found from another thread here:

    .product_list_widget li {
    box-sizing: border-box;
    float: left;
    margin-bottom: 35px;
    width: 22.3%;
    }

    but i had to use following css as well to make the prices come in line on the homepage.
    .product_list_widget li a span {
    height: 60px;
    display: block;
    }
    I am happy with the look of the products widget on desktop, only mobile browsers are cause of concern.
    Hope to hear from you guys soon…

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter surgimedex.webmaster

    (@surgimedexwebmaster)

    alright i fixed it.. ??
    i changed the css to :
    .product_list_widget li a span {
    min-height: 60px;
    display: block;
    }

    i realized that the earlier css was forcing the height to 60px making it non-responsive. now the min height is 60px which i wanted and the text is responsive.

    Regards,
    Jas

    Hi @surgimedex.webmaster

    Sorry to hear you ran into a problem. Glad you were able to resolve, thanks for sharing the fix.

    (A friendly reminder to use a Custom CSS plugin or child theme when making CSS changes).

    All the best.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Woocommerce product widget issue on mobile devices’ is closed to new replies.