Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26650

    I was able to successfully add breadcrumbs to the propulsion theme using this: http://www.kriesi.at/support/topic/how-to-add-yoast-seo-bread-crumb?replies=13#post-123329

    However, I am trying to figure out how to left align the breadcrumbs with the body content and keep responsive. Below I just added 250px margin to left which temporarily works for my browser size but this is definitely not the right way and on any other browser size it doesn’t work.

    How can I align properly and keep responsive?

    /*Removes breadcrumbs from homepage*/
    .page-id-61 .breadcrumb_last {
    display: none;
    }

    /*Adds left margin to breadcrumbs on all pages*/
    div.yoast-container {
    margin-left: 225px;
    margin-top: 25px;
    }

    Link to my site: http://goo.gl/gB8EO

    Thanks!

    #131152

    Remove your margin code and use following code instead

    div.yoast-container {
    border: none !important;
    }

    and add the class “Container” to your php/html code

    <div class='yoast-container container'>
    <?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
    } ?>
    </div>

    The container class will center the content and scale it if you re-size the browser.

    #131153

    Thanks Devin. Which php file (and where) do I need to add this to?

    #131154

    Hi,

    According to the reference link: http://www.kriesi.at/support/topic/how-to-add-yoast-seo-bread-crumb?replies=13#post-123329

    Edit header.php, replace this code:

    <div class='yoast-container'>
    <?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
    } ?>
    </div>

    Using this:

    <div class='yoast-container container'>
    <?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
    } ?>
    </div>

    Regards,

    Ismael

    #131155

    Looks like that did the trick — THANKS!

    I changed the header.php code and used the custom CSS as well… as suggested above.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Yoast SEO Breadcrumbs Alignment or Positioning’ is closed to new replies.