Circle pictures distorting on mobile site

Support
#1

I added pictures of our team members on our who we are page, and I noticed on the mobile version of the site the circle pictures for two team members get really large in size disproportionately for some reason, but only on the mobile site. I don’t see any reason it’s doing this, or how to resolve it. Please advise. Our site is e3EnergyEvolved.com - thanks.

#2

Hi There,

Can you please send us with your screenshots?

This is how the images look like on my iPhone.

#3

Thanks - I will review this shortly & comment back here.

#4

Sure do update us with your findings.

Take Care!

#5

Please see attached images here from my cell phone. You’ll notice the descrepancies in image size per picture. Thanks in advance for your help.

#6

#7

#8

#9

#10

You’ll see the first two images (of Damian Dube & Heather Dube) are smaller, and this is the preferred size.

The second two images (of Sara Sherman & Kate Wilber) are larger, and we would like them to be the same size as the others, so all images on the mobile site are uniform, as they are on the desktop site.

#11

Hi there,

Please try to add this code in the customizer:

@media (max-width: 767px) {
    .x-img-circle {
        width: 100% !important;
    }
}

Hope this helps.

#12

Thanks - do I just add that to the bottom of that code section? There are about 54 lines of various code now. So just go to the bottom and enter it there? Also, if I enter the code, just so I’m aware, how could it universally effect anything else on the website.

#13

Hey There,

Yes that’s correct, just paste the code at the end in your Customizer. Above code will only target circled images and won’t effect anything else on your site.

Hope this helps!

#14

I’m sorry - it looks like we had a miscommunication.

So I entered the code provided above, and what that did, was it made the smaller circle pictures as big as the big ones I shared above, but what I was looking for was that the bigger ones would become the same size as the smaller ones shown above on the mobile site.

Is there a way to do that instead? I don’t want the smaller pics to get bigger. I want the bigger ones to get smaller.

#15

Hi there,

It’s due to image’s actual size and if you’ll compare this two there is a big difference in size.


In responsive design, any content will only start to shrink down when the container became smaller that content (compressing the content). If the content is too small than the container, then there is no point compressing it. The same idea applies to the image, if the image is bigger than device width, it will shrink down to most/nearest applicable size. But if the image is already small, then there is no need to shrink it down.

  1. A mobile is a 767px width while this image https://e3energyevolved.com/wp-content/uploads/2016/12/e3-damian-bio-pic-crop-graphic.jpg is just 265px, hence, in mobile, it will stay at 256px.
  2. And this one https://e3energyevolved.com/wp-content/uploads/2017/03/headshot-square.jpg is 2048px, so it will be shrunk down to 330px to accommodate 767px device minus the spaces.

Two things that you can do to solve it

a. Edit all your images and change their sizes to 256px
b. Force the width through CSS, like this

    .x-img-circle {
        max-width: 256px !important;
    }
}```

But this means you're forcing all images to have 256px when not really needed.

Thanks.
#16

Fantastic - thank you for your help! I will have our designer edit the image sizes.

The funny thing is I had a feeling it was the image sizes, but our former web designer entirely missed this and couldn’t figure it out, which is why I’d emailed you all here - b/c I figure if a website designer couldn’t figure out that it had to do with the image sizes, then it had to be something else, but my original thought was correct.

I appreciate your help.

#17

You’re most welcome!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.