How to display 4 services on 1 line for Sydney FP: Services Type A?

Only 3 services can be displayed on one line for Sydney FP: Services Type A. How to display 4 on one line?

Website is www.expledge.com.

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.
aThemes Support

Hi Roman,

The website is www.expledge.com.

Hello, thank you for the link.

I can see that you still use Page Builder by SiteOrigin and most likely you want to change the type-a services widget. So please check this topic:

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

Kind Regards, Roman.
aThemes Support

P. S.
Here you can find instructions regarding the type-b services widget:

Hi @roman,

Thanks it works. Another issues - I would like to change only the category “Results from Expledge placements” to 4 columns but keep “Pay for Results” to 3 columns. How would I do this?

Ryan

Hello Ryan,

I’m not sure what exactly you want to achieve, unfortunately.

Can you please provide some explanatory screenshots?

Kind Regards, Roman.
aThemes Support

Hi @roman,

So I am using Service Type A for 2 rows. Using the code below changes both of the rows. I only want 1 row to be affected. So row 1 has 4 columns and row 2 has 3 columns.

@media (min-width: 992px) {
#primary .widget_sydney_services_type_b .service {
width: 25%;
clear: none;
}

This screenshot shows that 4 columns that I would like:
}

However, I have another row that I would like to be only 3 columns.

Hello Ryan, thank you for the explanation and screenshot.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

@media only screen and (min-width: 1200px) {
    div#primary div.widget_sydney_services_type_a .panel-widget-style-for-46-1-0-0 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 .panel-widget-style-for-46-1-0-0 div.service {
        width: 50%;
    }

    div#primary div.widget_sydney_services_type_a .panel-widget-style-for-46-1-0-0 div.service:nth-of-type(2n+1) {
        clear: left;
    }

    div#primary div.widget_sydney_services_type_a .panel-widget-style-for-46-1-0-0 div.service:nth-of-type(3n+1) {
        clear: none;
    }
}

Kind Regards, Roman.
aThemes Support

Hi @roman,

If I try to display only one service it is left-aligned. How do I center-align the one service?

See attached.

Hello Ryan,

See attached.

I don’t see any attachments, can you please try to add it once again?

Kind Regards, Roman.
aThemes Support

Attached is the image. I would like to display only one service. It is left-aligned and I would like to move it to the center. Thank you in advance.

Hello Ryan, thank you for the screenshot.

It looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.
aThemes Support