Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 3, 2019 at 5:27 pm #1049659
    tonydobrevski

    Hi,

    I am using the product list on one of my pages and when the product list is shown in mobile view, the price and the title are overlapping. How can I fix this?

    Thank you in advance!
    Best,
    Anton

    January 5, 2019 at 7:01 pm #1050369
    Basilis

    Hey tonydobrevski,

    On the following CSS rule:

    .av-catalogue-price {
    position: absolute;
    right: 0;
    top: 0;
    }

    for Media queries u need to remove position: absolute;

    So make it something like:

    @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
.av-catalogue-price {
    position: relative;
    right: 0;
    top: 0;
}
}

    Let us know if it works :)

    Best regards,
    Basilis

    January 6, 2019 at 3:18 am #1050458
    tonydobrevski

    Hi Basilis,

    Thank you for your response!

    It works, however, how can I make it work also for smaller devices (under 375px). I tried changing the “min-device-width” to 300px but it didn’t work.

    Thank you in advance!
    Best,
    Anton

    January 8, 2019 at 6:27 am #1051209
    Ismael

    Hi,

    You have to adjust the view port. This line:

    and (min-device-width: 375px)

    to:

    and (min-device-width: 200px)

    Or just remove that line completely.

    Best regards,
    Ismael

    January 9, 2019 at 8:08 pm #1052070
    tonydobrevski

    Hi Ismael,

    Thank you for your reply! It worked when I used and (min-device-width: 200px)

    Best,
    Anton

    January 9, 2019 at 9:41 pm #1052098
    Jordan Shannon

    Hi,

    I’m glad this worked out. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘WooCommerce Product List Title and Price overlap in mobile view’ is closed to new replies.