[Resolved] Smaller breadcrump container

Home Forums Support Smaller breadcrump container

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1368035
    Héctor

    Hi, I’ve modified my breadcrumbs hook to display before_main_content inside a container. But I’d like the container to have less top and bottom margin and also reduce the space between the container and the article as it is twice the space between the container and the header.

    Here’s my hook code:

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

    I’ve not added any CSS to it.

    Thanks in advance!

    #1368090
    Leo
    Staff
    Customer Support

    Hi there,

    Edit your code to this:

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

    Then add this CSS:

    .separate-containers .page-header.yoast-breadcrumbs {
        padding: 5px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1368105
    Héctor

    Thanks Leo!

    The container size is now right. But the gap bethween it and the post remains. Is there any way to remove it?

    #1368451
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .separate-containers .site-main > .grid-parent,
    .separate-containers .site-main > .grid-parent > .page-header {
        margin-bottom: 0;
    }
    #1368616
    Héctor

    Worked! Thanks a lot! 🙂

    #1368783
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

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