Our team - circle photo on mobile phone

andywattbulb · December 2018

Hello!

I have an issue with the 'Our Team circle photo' option on the mobile phone of my website.
The picture was too small so I added some custom CSS: .team.team_circle .image_frame {width: 200px !important;

Looks good on a computer screen but on the mobile phone it looks weird. Like half elongated circles. Is there any code/way to fix this?

http://www.mosaebiketours.com/about/

Thank you in advance,

Andi

Pablo · December 2018

Hi,

You have to use the @media queries and apply this CSS change on desktop only.

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

If you have problems with understanding media queries, feel free to ask.

Thanks

andywattbulb · January 2019

Hey Pablo,

Thank you very much for your reply and sorry for me slow one :S

I kinda understand what you sent me but I have a hard time putting the two codes in their correct places.

For instance I have this code on my website to make the circles bigger:

.team.team_circle .image_frame { width: 500px !important; height: 500px !important; }

and I'm guessing I have to add this to it somehow? @media screen and (max-width: 600px)

Pablo · January 2019

@media (max-width:1240px){
 .team.team_circle .image_frame { width: 200px !important; height: 100% !important; }
}

If the CSS of yours is correct, it will work.

Thanks

andywattbulb · January 2019

Hey Pablo,

I pasted it in the html but it made the circles small. That snippet of code is not something i created myself but found on one of the muffin group forms (themeforest) I beblieve. I'm looking where I found it precise but I cant find it back....

Pablo · January 2019

I've updated the code above.

Please paste this code to Theme Options > Custom CSS & JS > CSS

It should be okay now.

Thanks

andywattbulb · January 2019

Hey Pablo,

I added the code but it's still too small. It's supposed to be 500 px. But even when i change it to 500 px it doesn't do anything. When I remove @media (max-width:1240px){ It goes back to the size I want, but the phone version still remains screwy...

Pablo · January 2019

It's not a good idea to change it to 500px on mobile, because the mobile resolution is from 315px to 767px.
But, usually mobile resolution is like 315px to 500px, so your image will be cut if he will have 500px of width, that's why I suggest you change it too about 200-300px of width.

BeTheme JS script is making this image width smaller(even if the width is set 500px in CSS) to make it responsive, but it can be overwritten by changing the <img> width - we suggest not to do it.

Also, your images doesn't have this same resolution and they will not have perfectly equal height.
https://i.imgur.com/q3IcEjU.png
Thanks

andywattbulb · January 2019

Hey Pablo,

I'm trying to keep it 500 px on the desktop but want it to change to smaller size on a mobile, like 200 px.

Maybe another way is to make 2 different "our team" sections with different Responsive Visibility? One visible on the desktop, the other for mobile and tablets? But then I need the "desktop visible" code to pinpoint the code I have and have it avoid the "mobile visibility". Maybe I can explain it better in these pictures.

http://www.ictplusplan.nl/mosa/wp-content/uploads/2019/01/ourteam1.jpg

I used 2 new pictures of equal size this time.

Sorry for dragging this out...I really appreciate the help.

Pablo · January 2019

https://i.imgur.com/tmBEhlB.png

You can provide there a custom id, like 'imagesMobile' or 'imagesDesktop', then you'll be able to manage them with CSS by providing the #imagesMobile or #imagesDesktop before the .team.team-circle

Example:


 #imagesMobile .team.team_circle .image_frame { width: 200px !important; height: 100% !important; }

Thanks

Our team - circle photo on mobile phone

Comments