Editing the size of services widget trouble shooting


I opened a topic a few weeks ago and editing the size of the services widget to make 4 fit on a row. I received this code and it worked it wonderfully. However, I logged back in today, and it is back to the way it was before- with 3 on a row and one on the bottom. I checked the custom CSS and everything is exactly as it was. I don’t understand what happened.

@media only screen and (min-width: 1200px) {
    .atframework_services_widget .service {
        width: 24%;


Can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Okay, I have just inspected your Services widget and I don’t see that code applied.

I tried to apply it using browser tools and it works as it should.

How exactly did you add that code?

Kind Regards, Roman.

Hey Roman,

Thanks so much. I had applied it into TJ custom CSS plugin. The reason it wasn’t applied is because I was deleted the code and adding it again to see if that would work. Finally, I just left it off until I heard back from you. It was working properly for weeks and then it just stopped working, so I am concerned it could happen again with this plugin.

Can you please try to use Simple Custom CSS plugin and see if it helps?

Kind Regards, Roman.

Okay, I tried that and also doesn’t work. I asked you another question about decreasing the size between the title and text of the text widget. You gave me a code to try and that doesn’t work either, so I’m thinking there’s a larger problem. - I did try the text widget code in the custom CSS editor

Did you leave the custom CSS code?

I’m asking because I want to inspect it once again.

Kind Regards, Roman.

Yes. Both codes are in the Custom CSS Editor

Thank you

Well, looks like services code works. If it doesn’t work for you, please try to clear your browser cache.

Widget code can’t work because you didn’t add Text widget, only Search and Skills widgets. Please see solution in another topic to learn how to affect Search and Skills widgets with that code as well.

Kind Regards, Roman.

Hi Roman,

I’ve tried clearing my browsing cache several times and it doesn’t work.

Also, I don’t understand what you mean about the text widget. The other topic says for me to copy and paste the code into the CSS editor, which is what I have done. Please explain.

1. Here is what I see now:

Please note that 4 columns appear on 1200px of width and more, also please make sure that you did not zoom the page.

2. Here is your question from another topic:

I do not like the amount of space that comes between the title and text in the text widget. Is it possible to adjust?

There is a difference for me between widget and text widget. Currently you have search widget and skills widget on your website. In other words, you don’t have text widget on your site, you have two other widgets.

As far as I understand now, you want to affect all widgets, so please use this custom CSS code instead:

div#page .widget > .widget-title {
    margin-bottom: 15px;

Kind Regards, Roman.

Hey Roman,

I just uninstalled and reinstalled Chrome, so thankfully that worked.

However, I’m still confused on the text situation. I do not have a search widget at all on this site. I am using a skills widget, but only on one page. On the homepage, I am using two text widgets. On the About us page: 3 text widgets. On the services page: 1 text widget.

Furthermore, I again tried to enter the code you just gave me above and the decreased space is still not showing. I’ve again cleared my cache and have even tried on another browser.

Thanks for all your help

You have Search and Skills widgets in your sidebar here.

Now I understand, please try this:

section.widget > div.atblock > h2.widget-title {
    margin-bottom: 35px;

Kind Regards, Roman.

This is perfect. Thanks so much!!

You are welcome!

And have a nice day :slight_smile:

Kind Regards, Roman.