The items are not listed in order there is a gap between item listed how to fix this.

Screenshot:

            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="tg-topcity">
                    <figure class="tg-cityimg">                                 
                        <img src="<?php echo esc_url( $cat_image ); ?>" alt="<?php esc_html_e('City Image', 'listingo'); ?>">                                   
                        <figcaption>                                        
                            <h3><a href="<?php echo esc_url( get_term_link( $value->term_id, 'cities' ) ); echo esc_attr( $custom_url  ); ?>"><?php echo esc_attr( $value->name ); ?></a></h3>
                            <span><?php echo esc_attr( $total_users ); ?>&nbsp;<?php esc_html_e('Listings', 'listingo'); ?></span>                                      
                        </figcaption>
                    </figure>
                </div>
            </div>
        <?php } } ?>
    </div>

CSS

.tg-topcity, .tg-popularcities {
    width: 100%;
    float: left;
}

The items are not listed in order there is a gap between item listed how to fix this.

Screenshot: https://prnt.sc/sphfig

            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="tg-topcity">
                    <figure class="tg-cityimg">                                 
                        <img src="<?php echo esc_url( $cat_image ); ?>" alt="<?php esc_html_e('City Image', 'listingo'); ?>">                                   
                        <figcaption>                                        
                            <h3><a href="<?php echo esc_url( get_term_link( $value->term_id, 'cities' ) ); echo esc_attr( $custom_url  ); ?>"><?php echo esc_attr( $value->name ); ?></a></h3>
                            <span><?php echo esc_attr( $total_users ); ?>&nbsp;<?php esc_html_e('Listings', 'listingo'); ?></span>                                      
                        </figcaption>
                    </figure>
                </div>
            </div>
        <?php } } ?>
    </div>

CSS

.tg-topcity, .tg-popularcities {
    width: 100%;
    float: left;
}

• css

Share Improve this question asked May 28, 2020 at 14:37 Emma ExpatEmma Expat 2566 bronze badges 2

• Welcome to WPSE, Emma! This sounds like a CSS-specific question. You might try asking on StackOverflow or inspect the elements to toggle styles on and off to find out what is causing the gap and how to fix it, but I would suspect it may have to do with Bootstrap's styles, since their column styles are used on the outer wrapper. – WebElaine Commented May 28, 2020 at 14:45
• Hi @WebElaine I have posted question on StackOverflow stackoverflow/questions/62069439/… if you know the solution please suggest. – Emma Expat Commented May 29, 2020 at 8:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The problem sounds to be related to CSS, try using the following solution:

.tg-topcity, .tg-popularcities {
    width: 100%;
    display :inline-block;
    float: left;
}

or you may also try this instead:

.tg-topcity, .tg-popularcities{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}