Need help in Services Widget - reg

Hi,

I am using sydney theme for my personal website and i want your help in the Services Widget area…

One of my services is more than 55 words and i am using full content display but to avoid alignment issues with respect to other services i am more quick tag from the editor just for one of my service…

however, when the more link is clicked it takes me to a different page … rather than this, i want the content to be displayed in the same area… (along with less option at the end to collapse back)…

Pls help…

Hello there,

There are some plugins that helps you to accomplish it. I’d recommend you try this one https://wordpress.org/plugins/wp-showhide/installation/.

Regards,
Kharis

Thanks Karis ! Thanks a lot !!!

one more help …

i want to use only 5 services out of the 6… And when i do that the last 2 services that appear in the 2nd row are not equally spaced (i mean they are spaced for 3 leaving the last one empty which looks odd)

how can i space them equally ??

Thanks in advance…

Hello there,

Try doing the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'
   
   var service_a      = $('.widget_sydney_services_type_a');
   var service_items  = service_a.children().find('.service');
   var space_w        = service_items.outerWidth()/2;
   
   if( service_a.length > 0 && service_items.length == 5 && matchMedia( 'only screen and (min-width: 992px)' ).matches ){

      service_a.children().find('.service:nth-of-type(4)').css('margin-left', space_w+'px');
   
   }
   
})(jQuery);

  1. Update

You might need to clear your web browser’s cache before reloading your site to see the code addition takes affect. If your site is cached by a plugin like W3 Total Cache, delete the cache as well.

Let me know how it works for you.

Regards,
Kharis

Thanks Kharis !

thanks a ton !! it worked… Is there any way to adjust the space between the services columns ?

Also, i need one more help…
the header title and the sub title overlaps my image … how do i fix it to a custom position ??

Thanks in advance !!!

> Is there any way to adjust the space between the services columns?

Try adding the following custom CSS code into Appearance > Customize > Additional CSS:


@media only screen and (min-width:992px){
  
  .widget_sydney_services_type_a .content {
    padding-left: 20px;
    padding-right: 20px;
  }
  
}

Regarding to your other question, sorry I can’t assist you on this thread as it doesn’t relate with the current topic we are discussing. We would be more that happy to assist you on your new thread. Doing so, you will help us to document our support forum better; easier to browse by someone else in the future.

Regards,
Kharis

Hi Kharis,

thnaks ! thanks a lot… It worked…

In continuation to my previous question regarding the services widget… kindly let me know how do i increase the width of each of the services and also move the individual services widget to left of right…

thanks

If I got your point correctly, you would move your service widget inside a single row – in the row styles options > layout > enable the “Full Width Stretched” row layout.

Regards,
Kharis

No…

Used the code given by you earlier and connected my screenshot for your reference to your mail id

1st Point --> In the screenshot you can see that the last two services are not properly center aligned…

2nd Point --> Also, the contents of the last two services are bit more, so i would like to extend the column width of these two so that the contents can come in 5 or 6 lines as above services instead of going in for 7/8 lines…

Thanks for all your kind efforts

Hello there,

Sorry there are some other issues occur.

Try to replace the jQuery code I suggested with this one:


;(function($) {

   'use strict'

   $(window).load(function(){
   
     var service_a      = $('.widget_sydney_services_type_a');
     var service_items  = service_a.children().find('.service');
     var space_w        = service_items.outerWidth()/2;
     
     if( service_a.length > 0 && service_items.length == 5 && matchMedia( 'only screen and (min-width: 992px)' ).matches ){

        service_a.children().find('.service:nth-of-type(4)').css('margin-left', space_w+'px');
     
     }

   });
   
})(jQuery);


Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks it worked for the 1st point with respect to the alignment.

Can you pls help me on the 2nd pointer …

2nd Point –> Also, the contents of the last two services are bit more, so i would like to extend the column width of these two so that the contents can come in 5 or 6 lines as above services instead of going in for 7/8 lines…

Thanks for all your kind efforts

Hello there,

Please share the link to the page where I can see your services, so I can be more exact. If you want it to remain private, email it to kharisblank@gmail.com and mention the link to this thread.

Regards,
Kharis

Hi Kharis,

Have shared to link to your mail ID, pls help …

Thanks,
Jothimani

so that the contents can come in 5 or 6 lines as above services instead of going in for 7/8 lines…

Try adding the below code:


@media only screen and (min-width:1025px){
  .widget_sydney_services_type_a .service:nth-of-type(4) .roll-icon-box,
  .widget_sydney_services_type_a .service:nth-of-type(5) .roll-icon-box{
    width: calc(100% + 180px);
    width: -moz-calc(100% + 180px);
    width: -webkit-calc(100% + 180px);
  }
  
  .widget_sydney_services_type_a .service:nth-of-type(4) .roll-icon-box{
    margin-left: -180px !important;
  } 
  
}

Regards,
Kharis

thanks Kharis !

Thanks a ton !!! Works perfectly fine…

Hi Kharis,

Can you pls help here…

Pointer 3: With respect to the Services Type A,
· When Clicking on see more in Consulting (Can I have a small pop-up window appearing in the same area which shows the entire content ? ) because… when I click the see more, it pushes the rest of the services like Delivery & Project Management, Strategy to the bottom, which results in lot of blank space on the right…. Again, it looks pretty odd… Request your kind help here…

Hello there,

To accomplish it, you could use this plugin:

Regards,
Kharis