0

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;
}
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.com/questions/62069439/… if you know the solution please suggest.
    – Emma Expat
    Commented May 29, 2020 at 8:07

1 Answer 1

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;
}
2
  • 1
    Thanks a lot @TutsPie the second suggested solution solved my problem.
    – Emma Expat
    Commented May 30, 2020 at 15:19
  • kindly vote up for me thanks :p Commented May 31, 2020 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.