Messy Stacking of objects in section of home page

Support
#1

Hi,

I would like to know how I can get the objects on the homepage under “HOW DO OUR
STATS STACK UP?” row to stack in a more visually aesthetic way as they look all messy.

Home page link: klineadventures.com

Thanks!

Paul.

#2

Hi Paul,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .x-counter {
        width: 100%;
        text-align: center;
        margin: 15px 0;
    }
}

Hope it helps :slight_smile:

#3

Thai, thank you. How do I also get the title and icon to align the same way too? Please see the alignment issue in the linked image.

Paul.

#4

Hello Paul,

Thank you for the clarification. To resolve your issue, please update the code and make use of this code instead:

@media (max-width: 767px){

    .x-feature-box.stats-txt,
    .x-counter.pg-stats,
    .x-counter.pg-stats-yrs {
        float: none;
        width: 100%;
        text-align: center;
        margin: 15px auto;
    }

    .x-feature-box.stats-txt {
        width: auto;
        max-width: 240px !important;
    }
}

Hope this helps. Kindly let us know.