Making Images Smaller

[tsimarketing]

I’m creating our leadership page with images. I was wondering if there is way to make the images smaller other than just making the image box smaller. Is there a custom css code that I could use to adjust the size of the images? I’m mainly asking because on our leadership page I want to have 3 images per row but when I do that the images are a little too big so I was wondering if there is a css code that could allow me to make them smaller. I’ve tried making the images smaller in photoshop then upload them, but they still come out kind of big.

Here is the link to the leadership page.

TSI Healthcare Leadership

[Kyle – SUPPORT]

Hi

You could add this to your custom css

.spb_single_image.teammembers img {
  margin: 0 auto;
  width: 80%;
}

then on the single image assets add the extra class ‘teammembers’

– Kyle

[tsimarketing]

I put this css code in and added the extra class name to one of the photos but it doesn’t seem to be doing anything to the photo I added the extra class to. I’ve changed the margin number but it isn’t changing the size of the photo. Am I doing something wrong?

[Kyle – SUPPORT]

Which team member have you added the extra class to?

– Kyle

[tsimarketing]

To Amy Pinney. One of the larger ones at the bottom. I wanted to see if it would make that size smaller.

[Kyle – SUPPORT]

You’ve doubled up on all of your closing brackets:

.sf-icon-box-animated .front { padding: 30px 20px;  }
}
.page-id-52 .sf-icon-box-animated .front { padding: 40px;  }
}
.page-id-4221 .sf-icon-box-animated .front { padding: 0px;  }
}
.spb_single_image.teammembers img {
  margin: 40 auto;
  width: 80%;
}
.page-id-48 .sf-icon-box-animated .front { padding: 45px;  }
}

You should only put 1 } to end a rule

– Kyle

[tsimarketing]

Whoops. But the code for making the image size smaller looks like it only have one closing bracket, unless I’m looking at it wrong. So I should delete the ones that are on their own lines by themselves?

[Kyle – SUPPORT]

Yes, just make sure you only have one closing bracket per rule. If you move my CSS to the top of your custom css I bet it works

– Kyle

[tsimarketing]

Okay, so I made the photos smaller. Now I want to make all three centered on the page. Is there something I can add to that custom css code you gave me? Here is the link to the page: http://tsihealthcare.com/maintesting/?page_id=22. The three images I’m talking about are on the second row, I’ve made them smaller but they are all pushed to the left, I would like them to be centered. What is the best way to do this?

[Kyle – SUPPORT]

Change the CSS to:

.spb_single_image.teammembers img {
  margin: 0 auto;
  width: 73%;
}

– Kyle