Как сделать Breadcrumb отзывчивым?

Question

У меня проблема с отзывчивостью Breadcrumb. Мне нужно изменить размер крошки, мой размер крошек одинаков как на настольных, так и на мобильных устройствах, как я могу уменьшить размер крошки только на мобильных устройствах ...

Я попробовал

@media all and(max-width:500px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:10px 0 10px 30px;
     }
}

Мой код для хлебных крошек

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Answer 1

Попробуйте добавить этот CSS в пользовательский CSS вашей темы:

@media (max-width: 860px) {
     .breadcrumb, .breadcrumbs li a, .breadcrumb a{
          font-size: 10px !important;
     }
     .breadcrumb li a{
          padding:0px;
     }
}