Как вставить заголовок между сетками 2 CSS? - PullRequest
0 голосов
/ 10 марта 2020

Я пытался понять это весь день, но не повезло. Простой ответ - поместить заголовок за пределы сетки, но проблема в том, что внутри сетки находятся 2 catquery, которые отображают 2 отдельные категории внутри сетки, а затем есть следующее:

        <main id="main" class="site-main">

Когда Я пытаюсь переместить это или разделить и создать 2 контейнера сетки, рядом с сеткой есть боковая панель (которая отображает избранные сообщения в WP), и боковая панель становится неработающей или сетка нарушается. Я вставил заголовок (HEADER 1) над первой сеткой, которая работает. Но я пытаюсь разместить еще один заголовок над 2-ым catquery сообщений.

Код:

<div id="page" class="site grid-container start-container-head">
                <h2>HEADER 1</h2>
    <div id="content" class="site-content grid-x grid-padding-x">

        <div id="primary" class="content-area large-8 medium-8 small-12 cell fp-blog-grid">
            <main id="main" class="site-main">




<?php $catquery = new WP_Query( 'cat=3&posts_per_page=4' ); ?>


<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<?php
get_template_part( 'template-parts/content', 'excerpt' );
                ?>

***I NEED TO INSERT THE 2ND HEADER TEXT HERE***             
<h2">HEADER 2</h2>

                <?php endwhile;
    wp_reset_postdata();
?>

<?php $catquery = new WP_Query( 'cat=1&posts_per_page=4' ); ?>


<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<?php
get_template_part( 'template-parts/content', 'excerpt' );
                ?>

                <?php endwhile;
    wp_reset_postdata();
?>


            </main><!-- #main -->
        </div><!-- #primary -->
        <?php
        get_sidebar();
        get_footer();

Сейчас он думает, что второй заголовок является частью сетки, которую я попытался передвигаться по элементам div или разделить класс сетки на 2 отдельных элемента div и вставить над ним второй заголовок, но он разбил страницу.

Есть идеи, как это можно сделать?

Вот пример того, чего я пытаюсь достичь с помощью скриншота текущего макета:

Example Image

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...