-1

Unexpected space exists in loop.depend screen width, the space appear or hidden

screenshot

Link to the web page in the image

 <div class="container">
<div class="row"> 
     if (have_posts()):  while ( $wp_query->have_posts() ) : $wp_query->the_post();
                    ?>
                        <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-3 ulockd-prl5">
                            <div class="ficon-box text-center hvr-shadow ulockd-mb20">
                                <div class="ficon">
                                    <span class="<?php echo get_post_meta($post->ID, 'hekim-extension_ozellikler_icon-select', true);?> text-thm" title="<?php the_title(); ?>"></span>
                                </div>
                                <div class="fib-details">
                                <h4><?php the_title(); ?></h4>
                                <p><?php the_excerpt();//html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?> <a href="<?php the_permalink(); ?>"><?php _e( 'Read More...', 'hekim' )?></a></p>
                                <?php // html5wp_excerpt('html5wp_index');?>
                            </div>
                        </div>
                    </div>
    <?php endwhile; ?>
</div>
</div>
D_00
  • 1,440
  • 2
  • 13
  • 32
In-my-country-we-dont-use-name
  • 7
  • 2
  • The issue as I see there is the closing `` for `row` class. If you close it just before the element where the design breaks, it fixes the layout. Then you start with another `row` for the next one. I'll add another comment if I find a solution! – Siddharth Bhansali Sep 28 '21 at 05:31
  • I just saw that you are using Bootstrap 3.3.7 which is extremely old. The problem you are facing doesn't occur in the newer versions. To solve: add `
    ` after all 4th `col-xxs-12` elements. Your issue will be fixed.     – Siddharth Bhansali Sep 28 '21 at 05:39
  • @SiddharthBhansali thanks, your code works.I wonder how can I transfer my bootstrap to newest version easly? – In-my-country-we-dont-use-name Sep 28 '21 at 12:47
  • That would depend on how you use Bootstrap in the first place. If it is a CDN, or node, or something else. If the project is in early stages, then the upgrade can be done easily. If it is an old project, then it might be tough and could take a lot of time. – Siddharth Bhansali Sep 29 '21 at 05:27

1 Answers1

-1

need add <div class="clearfix visible-xxs-block"></div> after all 4th col-xxs-12 elements. solution:

<div class="row">
                <?php
                $xxs_block = 1;

                if (have_posts()):  while ( $wp_query->have_posts() ) : $wp_query->the_post();
                ?>
                <?php $xxs_block++; ?>
                    <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-3 ulockd-prl5">
                        <div class="ficon-box text-center hvr-shadow ulockd-mb20">
                            <div class="ficon">
                                <span class="<?php echo get_post_meta($post->ID, 'hekim-extension_ozellikler_icon-select', true);?> text-thm" title="<?php the_title(); ?>"></span>
                            </div>
                            <div class="fib-details">
                            <h4><?php the_title(); ?></h4>
                            <p><?php the_excerpt();//html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?> <a href="<?php the_permalink(); ?>"><?php _e( 'Read More...', 'hekim' )?></a></p>
                            <?php // html5wp_excerpt('html5wp_index');?>
                        </div>
                    </div>
                </div>
                <?php if ($xxs_block == 5) { ?> <div class="clearfix visible-xxs-block"></div> <?php } ?>
In-my-country-we-dont-use-name
  • 7
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 28 '21 at 13:08