Issue with changing portfolio column to 3 columns

I’m not sure what I am doing wrong. I have used the following code snippet

@media only screen and (min-width: 991px) {
.projects-area .project-item {
width: 33.333333%
}
}

However this is what my portfolio looks like www.trace-dev.website

I want 0 padding and 3 images to fit/stretch across the screen. Also - Is there a way to remove the mouse over effect and have the title show 100% of the time?

Hello there,

I checked your site and I found no padding between the project items as seen on the below screenshot.

Cloudup

To remove the overlay effect, add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.project-pop,
.project-pop-wrap {
  display: none;
}

Regards,
Kharis

Thanks Kharis - I did figure out how to adjust the 3 columns for the portfolio. I just tried using the code to remove the overlay effect however it now removes the title as well. Is here a way to keep the title only? And can you move the title to the bottom of the image with a coloured background?

Hello there,

Try to use this code:


.roll-project .project-title-wrap {
  opacity: 1;  
  height: auto;
  bottom: 0;
  left: 0;
}  

.roll-project .project-item .project-pop {
  display: none;  
}  

.roll-project .project-item:hover .project-title-wrap {
  -webkit-animation: unset;
  -moz-animation: unset;
  animation: unset;  
}

.roll-project .project-title {
  background: #264856;
}  

Regards,
Kharis

Thanks! That worked perfectly :slight_smile: You are by far the best website template support folks I have ever come across. Thank you for everything you help with - great team!

Is there a way to create a small white line on each side of the middle column to show separate colummns? I’ve tried the padding in the widget but it only does the left and right of the entire widget.

Try to add a white border on each item with the below CSS code:


.roll-project .project-item {
  border: 2px solid #fff;
}

Does it work for you?

Regards,
Kharis

No - that didn’t work

Try this code


.roll-project .project-item {
  border: 2px solid #fff;
}

.roll-project .project-item:first-child {
  border-left: none;  
}  

.roll-project .project-item:last-child {
  border-right: none;  
}  

which will be resulting this

https://cloudup.com/cbIi8nKu7J9

Doesn’t this meet your need?

Regards,
Kharis

perfect! thank you!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis