ワードプレスでパンくずリストの表示位置を変更する方法

Question

ワードプレスでブログを作成しています。

パンくずリストのプラグイン、breadcrumbをインストールしてCSSで表示位置を調整しようと思っているのですが、
思うように変更できません。
下の画像の赤い矢印の先の黄色いところに表示したいです。
PC、スマホ、タブレット、どの端末で閲覧してもそれぞれ同じ位置に表示させたいです。

現状
ＷＰのテーマはTwenty Seventeenを使用しています。
子テーマを作成してCSSを調整していますがうまくいきません。

お詳しい方よろしくご教示お願いいたします。

コードは個別投稿ページのget_header() の下に記述しました。

php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>
//ここからコードを記述
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>//ここまで
<div class="wrap">

	<div id="primary" class="content-area">
 	
		<main id="main" class="site-main" role="main">
       
			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Comments

[kei344]

WordPressテーマはテーマ名と取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）また、breadcrumbを表示するためのコードを挿入したと思うのですが、その近辺のコードも提示ください。

Answer 1

#primary の中に breadcrumbs を入れればよいのでは？

<div class="wrap">
	<div id="primary" class="content-area">
		<div class="breadcrumbs"><?php if ( function_exists( 'bcn_display' ) ) { bcn_display(); } ?></div>
		<main id="main" class="site-main" role="main">
		</div>
	</div>
</div>

Comments

[m-radio]

回答ありがとうございます。
widthを指定することで解決できました。
wrapperに含めなくても同じ位置に表示できましたが、推奨などはありますでしょうか。

[kei344]

widthを直接指定するならレスポンシブ用のCSSも追加しておいたほうが良いですよ。

Answer 2

ソースが無いので憶測です。

パンくずリスト自体が、下の白背景のWrapper？に
含まれていないから100%の幅になっているのだと思います。
対処としては、Wrapperに含める。
パンくずリストがdivなどで囲んであるならば、そちらに、

#breadcrumb {
  margin:0 auto;
  width:900px;/* 下の白背景と同じサイズ */
}

のようにすれば、いけるかと。

Comments

[m-radio]

回答ありがとうございます。
widthを指定することで解決できました。
ご指摘のwrapperに含めても含めなくても同じ場所に表示できましたが、推奨などはありますでしょうか。

[LibertyBell3]

予測とほぼ一緒の内容でしたね。
kei344様とカブりますが、レスポンシブ用の記述が追加で必要となりますので、
タブレットでサイズダウン、スマホで90%くらいにして、おそらくリストで書かれるものを、
横並びではなく、縦に続くようにすれば、良いのではないでしょうか？