Recent projects thumbnails size

Hi again! I´ve been searching for a way to reduce the the recent projects thumbnails size from the standard 350px by 250px to somethign of my own choosing. I´m looking to have a maximum width of around 210px. Is this possible via some short CSS code or something easy like that?

Best regards, Simon.

I found the solotion so I thought that I should share my findings with everyone if there´s someone who would want to do the same thing.

This is basically what you need:

/* Centrers the project thumbnails 
-------------------------------------------------------------- */
.projects-area {
	text-align: center;
}
.projects-area .col-md-4 {
   display: inline-block;
   float: none;
}

/* Changes the thumbnails size (I only specify width)
-------------------------------------------------------------- */
.project-image {
	max-width: 200px;
}
.project.col-md-4.col-sm-6.col-xs-6.wow.zoomIn.animated {
	max-width: 200px;
}

/* Centrers the link icon, removes the magnifying glass and makes the link icon grey
-------------------------------------------------------------- */
.project-image:hover > .link-icon {
   left: 32.5%;
   color: #444;
}
.pp-icon {
   display: none;
}

/* Changes the transparency level of the entire thumbnail, note that opacity 0.3 is default
-------------------------------------------------------------- */
.project-image:hover > img {
	opacity: 0.3;
}	

/* Removes the link icons background (looks as if it's transparent)
------------------------------------------------------------- */
.link-icon {
	width: 0px;
	height: 0px;
}

/* USE THIS INSTEAD OF THE CODE ABOVE IF YOU DON'T WANT TO REMOVE THE LINK ICON BACKGROUND. Centrers the link icon and brings back the link background
------------------------------------------------------------- */
.link-icon .fa {
	position: relative;
	top: 15px;
	left: 0px;
}

Note that you’ll have to play around a bit with the values if you’re going to use another size than 200px as the thumbnail width. Otherwise the link icon wont centrer.

Note that I’m no CSS programmer so this might not be the best way of doing this. However it does work.

// Binky

Doesnt work for Sydney theme. Anyone can help?

For Sydney, try this code:

    @media only screen and (min-width: 768px) {
      .roll-project.fullwidth .project-item {
         width: 210px; 
      } 
    } 

Regards,
Kharis