Services section A layout

I want to add 4 different services in the section. It is displayed like this http://prntscr.com/dvhxsq

i.e. 3 in one row and another one below

Can I edit the section so that it displays 2 in each row, to make it look symmetrical ?

Hello @onlinesj,

Please try to use the following CSS code in order to symmetrically display your 4 services. You should get 4 services in a row on 1200px of width and more, 2 in a row between 992px and 1199px inclusive, and 1 in a row on 991px and less.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 1200px) {
    div#primary div.widget_sydney_services_type_a div.service {
        width: 25%;
        clear: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    div#primary div.widget_sydney_services_type_a div.service {
        width: 50%;
    }

    div#primary div.widget_sydney_services_type_a div.service:nth-of-type(2n+1) {
        clear: left;
    }

    div#primary div.widget_sydney_services_type_a div.service:nth-of-type(3n+1) {
        clear: none;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

@Roman

Awesome. Thank you so much.

Worked out perfect.

Thanks again

You are welcome @onlinesj!

Kind Regards, Roman.