Resizing images of team members on mobile devises

This is the project im working http://maquetaoxigeno.guordit.com.mx/oficina/ on computer an tablets, te members plugin looks great but on mobile phones they look to big, as i show you on the image below

https://drive.google.com/file/d/0BzJjvr33ODPfRGtXamR0SW9QNW8/view?usp=sharing

how can i fix it on mobile devises.

Best regards.

Serch

Hello Serch,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 480px) and (max-width: 991px) {
    .widget_sydney_employees_type_b div.team-item {
        width: 50%;
        float: left;
    }
}

Also please use one Sydney FP: Employees - Type B widget instead of two, in order to make it look better when there are two columns.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

i tried the code and didn’t work, do you have another idea how to fix it?

Best regards.

Serch

Hello Serch,

I’ve just tried to apply that code on my localhost and it works.

Please explain how exactly you added the code.

Kind Regards, Roman.

Hi Roman, thanks for your help,

i will show you what i did, i pasted the code you gave me on the CSS plugin as you will see on the image below
https://drive.google.com/file/d/0BzJjvr33ODPfTnZNLWVWM095SlE/view?usp=sharing

And when i go to check on my cell nothing happens
https://drive.google.com/file/d/0BzJjvr33ODPfZEdsN1JkUEt4UGs/view?usp=sharing

also made the arrangement you suggest in only one Sydney FP: Employees – Type B widget instead of two
https://drive.google.com/file/d/0BzJjvr33ODPfSDhjYzM2YmpKc1k/view?usp=sharing

i used to have the following code to center de two employees at the bottom

@media only screen and (min-width:992px){
  #panel-336-0-1-3 .roll-team .team-item:first-child{
    margin-left: 17%;
  }
}

but now that i made the change to only one Sydney FP: Employees – Type B widget instead of two it broke
as you can see on the image below

https://drive.google.com/file/d/0BzJjvr33ODPfZlRSM1JZTERBbkk/view?usp=sharing

Best Regards.

Serch

Hello Serch,

  1. CSS code that I provided above doesn’t work on your site because preceding custom CSS Media Query rule isn’t closed, it lacks one closing curly bracket } character.

  2. Please replace your centering custom CSS code with this:

@media only screen and (min-width: 992px) {
    .widget_sydney_employees_type_b div.team-item:nth-child(4) {
        margin-left: 17%;
    }
}

Kind Regards, Roman.