Services widget not affected by attributes

Good day,

I have a services widget that is not affected by the attributes when viewed on a desktop, however, on mobile it’s fine. Also, when viewed under customize, everything seems fine.

Hello there,

Please share the settings of your active services widget, so I can reproduce and troubleshoot it on my test site.

Regards,
Kharis

Hi Kharis,

I changed the settings of the widget itself as in the screenshot below:
image

The layout has the following settings:
Padding – all set to 5px
Mobile padding – all set to 5px

The design has the following settings:
Background color was set to a random color – orange in my case
No background image
Content alignment – center
Everything else was left unchanged

The live desktop view shows the text separate from the widget and not aligned
The editor desktop view shows it in the widget and center aligned
The live mobile view shows it correct – in the widget and center aligned

Looking forward to your feedback.

Thank you the details. I’d like to ask one thing:

Do you want to display only one service and center it as it looks on mobile?

Regards,
Kharis

Hi Kharis,

That is the main objective, yes. However, I would potentially add another service widget or 2 later, but if the current issue is sorted, adding another service shouldn’t be a problem.

Kind regards,
Juan

Hello Juan,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .widget_sydney_services_type_a,
    .widget_sydney_services_type_a > .panel-widget-style{
      text-align: center !important;
    }

    .widget_sydney_services_type_a .service.col-md-4:nth-of-type(3n+1) {
      clear: unset;
    }

    .widget_sydney_services_type_a .service.col-md-4 {
      display: inline-block;
      float: none;
    } 

Regards,
Kharis

Hi Kharis,

It works, thanks!

Kind regards,
Juan

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis