Themeco Community

Hi,

Thanks for writing in!

To achieve that, you can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
body #housescores .x-column.x-sm, 
body #accreditations .x-column.x-sm {
    width:44%
    display:inline-block;
}

body #housescores,
body #accreditations {
   text-align:center;
}

}

Hope that helps.

Hi There,

Upon checking your website, I can see that it’s under construction.

In this case, would you mind providing us with your admin account so we can take a closer look?

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

Hi there,

My apologies as I left out a closing ; to one line of CSS in the previous code given, that’s why it does not appear to working. Kindly use this code instead:

@media (max-width: 767px) {
    
    body #housescores .x-column.x-sm, 
    body #accreditations .x-column.x-sm {
        width: 44%;
        display: inline-block;
    }

    body #housescores,
    body #accreditations {
        text-align: center;
    }

}

/* Shows the blocks in 1 row in smaller screens - remove if you don't need this */
@media (max-width: 380px) {

    body #housescores .x-column.x-sm, 
    body #accreditations .x-column.x-sm {
        width: 98%;
        display: inline-block;
    }

}

I have tested this code and the current view collapses from 4 columns to 1 column at screen width of 767px and below so we have to define the CSS to set the row to fit 2 blocks in 1 row. The block of CSS at the bottom part is for smaller screen devices to show the boxes individually in each row so they do not show to close to each other. If you want to show them into 2 rows all throughout, you can removed the CSS block for 380px and below devices.

Hope this helps.