Employee section on mobile overlaps

Hello,
Currently on website jpconsulting.hekko24.pl on mobile version, Employee section descriptions are overlapping on each other.

The only custom change in CSS is coming from other topic in that forum, however this effect of overlapping comes also before those changes were applied:

    .sydney_employees_widget .team-content{
      display: none;
    }

    .roll-team .team-item .team-pop{
      background-color: rgba(214,80,80,0.5);
    }

Could you please advise how to eliminate overlapping here?

Hello there,

This happens because the text are separately inserted outside of the employee item block. As in mobile screen employees block becomes one line and carousel is active, the text looks unattached.

The best possible solution is use jQuery code. Try doing the below steps, please.

  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($){

      $.fn.addEmployeeText = function(e) {

        this.each(function(){

          var i = $.extend({
                  name: "",
                  text: "",
              }, e),
              name  = $(this).children('.team-content').children('.name'),
              nameA  = $(this).children('.team-content').children('.name').children('a'),
              tName = $.trim(name.text());

          if( nameA.length ) {
            tName = $.trim(nameA.text());
          }

          var teamText = '';

          if( tName == i.name ) {
            teamText = i.text;
          }

          $(this).append('<div class="team-text">' + teamText + '</div>');

        });

      }; // Function ends

      // Set cutom text
      $('.roll-team .team-item').addEmployeeText({
        name: "Jola",
        text: "Text for <strong>Jola</strong>"
      });

      // Set cutom text
      $('.roll-team .team-item').addEmployeeText({
        name: "Patryk",
        text: "Text for <strong>Patryk</strong>"
      });

    })(jQuery);

The text are defined in the code block, which the code looks for name of employee as a parameter to match.

      // Set cutom text
      $('.roll-team .team-item').addEmployeeText({
        name: "Jola",
        text: "Text for <strong>Jola</strong>"
      });

      // Set cutom text
      $('.roll-team .team-item').addEmployeeText({
        name: "Patryk",
        text: "Text for <strong>Patryk</strong>"
      });
  1. Update

Clear any applied cache before reloading your site, as it usually prevents new code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

You might also want to display employees in grid fashion, so carousel on mobile screen will be disabled. If so, you could follow this solution.

Regards,
Kharis

1 Like

Many thanks for response!
It indeed helped a lot :slight_smile:

However one more issue appear - even if I have exactly the same photo in this section uploaded (280x280 px), somehow on Desktop version both elements are not aligned horizontally in one line. Could you explain what’s causing this effect and what’s possible fix? :slight_smile:

Hello there,

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

    @media only screen and (min-width: 601px) {
      .roll-team .owl-wrapper,
      [data-widgetid="employees-widget-3-0-0"].roll-team .owl-wrapper {
        display: table;
        margin-left: auto;
        margin-right: auto;
        width: auto !important;
      }
      .roll-team .owl-item {
        float: left !important; 
      }  
    } 

Regards,
Kharis

1 Like

Thanks, works like a charm!

Great!

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