Alignment Issue Due To Different Title Length

  • Resolved apeironftw

    (@apeironftw)


    4 years, 4 months ago

    Hello. I need some help with aligning price & star rating. They are not aligned due to product title length. It’s even worse in mobile view (considering screen size). Here is a screen shot. I tried some css that I found on forums with additional css in customizer but didnt work for me. Any help with this is highly appreciated.

    Ibrahim

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Kevin

    (@jx-3p)

    4 years, 4 months ago

    Hey, thanks for reaching out!

    One option is to use CSS similar to this:

    @media (max-width: 440px) {
h2.woocommerce-loop-product__title {
    min-height: 120px;
    }
}

@media (max-width: 500px) {
h2.woocommerce-loop-product__title {
    min-height: 90px;
    }
}

@media (max-width: 760px) {
h2.woocommerce-loop-product__title {
    min-height: 65px;
    }
}

@media (min-width: 760px) {
h2.woocommerce-loop-product__title {
    min-height: 80px;
    }
}

    Add the above code to Customize> Additional CSS. You may be able to adjust the above CSS to improve the look, but that should help.

    Let me know if that works for you.

    Best,
    Kevin

    Thread Starter apeironftw

    (@apeironftw)

    4 years, 4 months ago

    Hi @jx-3p. Thank you very much for the code. That works for PC view but didnt make a difference for mobile view. I tried Chrome and Safari on my iPhone. Could you help with that too if you dont mind? Appreicate your support.

    Ibrahim

    Thread Starter apeironftw

    (@apeironftw)

    4 years, 4 months ago

    Hi again. I actually fixed it with the following code. Thanks for the support.

    Have a blessed day!

    Ibrahim

    @media(max-width: 1200px){
.product .woocommerce-loop-product__title {
    min-height: 120px !important;
}
}
    • This reply was modified 4 years, 4 months ago by apeironftw.
    • This reply was modified 4 years, 4 months ago by apeironftw.
    Kevin

    (@jx-3p)

    4 years, 4 months ago

    Awesome! Glad to hear that you were able to find a solution.

    Don’t hesitate to reach out if I can help with anything else!

    Thanks,
    Kevin

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Alignment Issue Due To Different Title Length’ is closed to new replies.

Tags