Service type A - nr of columns

Hi There!

My site is: www.zsombordeak.com

I am creating a page named “SPONSORS” (top menu, right side). I am using the Pert inbuilt widget, Service Type A. I think by default the widget should show the services in 3 columns. However on my page, they appear in 4 columns. Why is this? I need only 3 columns in a row.

Can you please help me?

Thanks in advance!

Hello there,

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

    @media only screen and (min-width: 992px) {
      .widget_perth_services_type_a .service {
        width: 33% !important;
      }
    } 

You’d need to adjust the media query (min-width) value if needed.

Regards,
Kharis

Thank you Kharis!

It works for the site on the laptop screen. However not on the mobile. On the mobile, I would like the services to show 1 after the other. Now they are next to each other, making it impossible to read.

How can I solve that?

Thanks in advance!

Inspecting it with inspector tool, I found the below code overrides the default item collapse.

    @media (min-width: 180px)
    .widget_perth_services_type_a .service {
        width: 24%;
    } 

Access your site’s additional CSS and remove if it presents in there. Otherwise add this code:

    @media only screen and (min-width: 180px) and (max-width: 991px) {

      .widget_perth_services_type_a .service {
        width: 90% !important;
      }

    }  

Regards,
Kharis

Thank you Kharis! Works perfectly!

You’re welcome!

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

Have a nice weekend! :slight_smile:

Regards,
Kharis

Hi Kharis,

I have another problem now. Webpage: www.zsombordeak.com

The Service Type A on the mobile screen is shown one after the other. That is great. But, there is no space between the text and the side edges of the mobile. I believe there should be half a cm or so on both sides. Can you help me solve this?

Thanks in advance!

Hello there,

To add more spaces on smaller screen where each items collapsed, add the below custom CSS code:

    @media only screen and (max-width:991px) {
      .widget_perth_services_type_a .service {
        margin-bottom: 60px;
      }
    }

Regards,
Kharis

Hi Kharis,

Thanks for the quick reply! I added the above CSS, but did not solve the problem. I want space to be added on the left and right sides of the mobile screen. As indicated on the uploaded picture.

Thank for the help in advance!

Hello there,

Try adding padding-left and padding-right.

    @media only screen and (max-width:991px) {
      .widget_perth_services_type_a .service {
        margin-bottom: 60px;
        padding-left: 15px;
        padding-right: 15px;
      }
    }

Regards,
Kharis

Thanks Kharis! This works perfectly!

One last question.
Now, talking about the Services Type A on my “My Team” page: http://zsombordeak.com/myteam/

I would like to have bigger space between the 3 rows of services. Now the rows are too close to each other on a computer screen view. What is the solution for this?

Thanks again!

Hello there,

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

    .widget_perth_services_type_a .service {
      margin-bottom: 70px !important;
    } 

Regards,
Kharis