enter image description here

I am developing a theme using bootstrap, but I am not able to display my posts as I would like.

This is how I wanted it to be:

But my best result was that ….

To differentiate the images in size I use different classes, this is the code I did …

<div id="blog">

    <div class="container">
        <div class="row">

            <div class="col-md-12 text-center titulo-blog">
                <h3 class="page-h3"><?php the_title(); ?></h3>
            </div>
        </div>
    </div>

    <?php if (have_posts()): ?>

    <div class="container">
        <div class="row">
            <!--                        FIRST BLOCK - BIG - SMALL -->
            <div class="col-md-8 col-sm-12 img-blog ">

                <?php query_posts(array(
                    'category_name' => 'img',
                    'off-set' => -1,
                )); ?>
                    <?php while (have_posts()): the_post();  ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">

                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>
                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>

                            </div>
                        </div>
                    </a>
                    <?php endwhile; ?>
            </div>
            <div class="col-md-4 col-sm-12 imp-blog">


                <?php query_posts(array(
                    'category_name' => 'imp',
                    'off-set' => -1,
                )); ?>
                    <?php while (have_posts()): the_post();  ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">
                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>
                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>
                            </div>
                        </div>
                    </a>
                    <?php endwhile; ?>
            </div>
        </div>

        <?php endif; ?>

    </div>
</div>

Please help me i have no idea how to solve this

Read more here: Problems with the WordPress loop


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: