Same size employee images not displaying the same

Hello,

after reading some of the other posts I found out about making square employee images a max of 400x400 which I did. However after doing this when I look at the site on the front end the images still aren’t the same. As they are side by side you can see one is taller than the other. I’ve tried for ages to try and fix it but no success. Please can you tell me what I’m doing wrong?

Webpage (still in progress): www.pb-nutrition.co.uk

There is also an issue with the images on mobile - the images seem too wide for the screen so when I laterally scroll/swipe to the second employee you only see the right of the first image and the left of the second!

Thanks in advance

Ben

Hello Ben,

I checked your site. It looks like the actual size of your images aren’t equal.

Please try to manually set the image size (400x400) manually with image editing program (like Photoshop) before uploading.

Regards,
Kharis

Hi Kharis, ok thank you. I used the resizing within the image uploaded so will resize first then the upload.

Thanks

Hi Kharis,

sorry for the delay. I have resized both to 400x400 and looks good now on desktop. However on mobile it still looks stretched/overly big. Is there a setting I’ve got wrong somewhere? I’ve got the option ticked to centre it because I only have 2 employees, not sure if that makes a difference.

Thanks

Hello there,

To fix it, please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 970px) {
      .roll-team.owl-carousel .owl-wrapper,
      .roll-team.owl-carousel .owl-item,
      .roll-team.carousel .team-item {
        width: 550px !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
        float: none;
      }
      
      .roll-team.carousel .owl-controls {
        display: none;
      }  
      
    } 

Regards,
Kharis

Hi Kharis, thanks again that fixed the size issue. However now on mobile it stacks the employees on top of each other, and then the lateral scroll goes to a blank page? Is it clashing with some other CSS added?

Thanks

Maybe. Backup all of your custom CSS code to your note taking application. Then remove it from customizer. Save and see how it changes.

Regards,
Kharis

Hi Kharis, unfortunately removing all CSS apart from the one suggested above doesn’t solve the issue and still stacks the employees above each other on mobile.

Any other thoughts as to why? I’m at a loss!

Thanks
Ben

Hello Ben,

Try clearing applied caching on your web browser, please.

Regards,
Kharis

Hi Kharis, I have tried this, and viewed incognito and still showing them stacked ontop of each other - tried on desktop and mobile. It looks like the attached

:

Thanks
Ben

Hi Kharis, just checking in if you know what is causing it to still stack vertically?

Thanks
Ben

Hello @kharisblank - are you able to help on this at all? Thanks. Ben

Hello there,

Please try to share all of your custom CSS code here, so I can reproduce it in my test site and correct it.

Regards,
Kharis

Hi Kharis yes of course. I did try deleting all Custom CSS and just adding in your suggestion above, but it was still stacking the employees on top of each other. My custom css is as follows:

.roll-team.owl-carousel .owl-item {
width: 550px !important;
}

.roll-team.carousel .team-item {
width: 550px !important;
}

.avatar img {
width: 100% !important;
}

#mainnav ul li a { font-size:18px; }

.team-social .fa-twitter:before {
content: ‘\f0e1’;
}

.team-social .fa-google-plus:before {
content: ‘\f16d’;
}

.button-slider {
font-size: 18px;
}

div.widget_sydney_action h3.widget-title {
font-size: 20px;
}

div.widget_sydney_action .roll-button {
font-size: 16px;
}

.site-info.container {
display: none;
}

.page-id-6 .site-footer {
display: none;
}

.widget_sydney_action .widget-title{
margin-bottom: 0;
}

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

#masthead.site-header.fixed {
position: fixed !important;
}

}

@media only screen and (max-width:767px){

.site-header{
height: 70px;
}

.header-wrap{
text-align: centre;
}

.btn-menu{
margin-left: 15px;
margin-bottom: 30px;
margin-top: -35px;
}

}

@media only screen and (max-width: 970px) {
  .roll-team.owl-carousel .owl-wrapper,
  .roll-team.owl-carousel .owl-item,
  .roll-team.carousel .team-item {
    width: 550px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  
  .roll-team.carousel .owl-controls {
    display: none;
  }  
  
} 

.woocommerce-page .widget-area {
display: none;
}
.woocommerce-page .content-area {
width: 100%;
}

Thanks
Ben

Hello Ben,

Try replacing all your custom CSS code with this one:

     .avatar img {
         width: 100% !important;
    }
     #mainnav ul li a {
         font-size:18px;
    }
     .team-social .fa-twitter:before {
         content: ‘\f0e1’;
    }
     .team-social .fa-google-plus:before {
         content: ‘\f16d’;
    }
     .button-slider {
         font-size: 18px;
    }
     div.widget_sydney_action h3.widget-title {
         font-size: 20px;
    }
     div.widget_sydney_action .roll-button {
         font-size: 16px;
    }
     .site-info.container {
         display: none;
    }
     .page-id-6 .site-footer {
         display: none;
    }
     .widget_sydney_action .widget-title{
         margin-bottom: 0;
    }
     @media only screen and (max-width:991px){
         #masthead.site-header.fixed {
             position: fixed !important;
        }
    }
     @media only screen and (max-width:767px){
         .site-header{
             height: 70px;
        }
         .header-wrap{
             text-align: center;
        }
         .btn-menu{
             margin-left: 15px;
             margin-bottom: 30px;
             margin-top: -35px;
        }
    }
     .woocommerce-page .widget-area {
         display: none;
    }
     .woocommerce-page .content-area {
         width: 100%;
    }

    @media only screen and (min-width: 601px) {
      .roll-team.owl-carousel .owl-item {
          width: 550px !important;
      }
      .roll-team.carousel .owl-controls {
          display: none;
      }    
    }

Before doing so, make a backup for your current one.

Regards,
Kharis

Hi Kharis,

thanks very much for this - issue fixed. Thanks for the perseverance!

Ben