break line of breadcrumbs on mobile

  • Resolved atesz03

    (@atesz03)


    4 months ago

    Hello,

    I would like to break the line of long breadcrumbs on mobile. The following css code doesn’t have any affect anymore since the latest theme update.

    .site-breadcrumbs {
    height: auto;
    line-height: 30px;
    white-space: pre-wrap;
    }

    If I modify it like the following, then it works for single posts but I’m looking for a solution also for the pages.

    .single-post .site-breadcrumbs {
    height: auto;
    line-height: 30px;
    white-space: pre-wrap;
    }

    Thank you in advance!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Shahin

    (@skalanter)

    4 months ago

    Hello @atesz03,

    Thank you for reaching out,

    Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    @media(max-width: 480px) {
    nav.site-breadcrumbs {
        white-space: normal !important;
        overflow: visible !important;
    }
    .site-breadcrumbs {
        height: auto !important;
    }
}

    Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

    Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

    I hope that helps.
    Best Regards

    Thread Starter atesz03

    (@atesz03)

    4 months ago

    Thank you! The provided code solved my problem.

    Shahin

    (@skalanter)

    4 months ago

    You’re welcome.
    I’m glad we could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.