Project images border

Hello :slight_smile:
how can I add border to project images (red color in normal state and yellow color in hover state) ?

now I have i custom css:

.roll-project .project-item .project-pop {
  border: 2px solid yellow;
}  

But have no idea how to set red border for normal state?

Thank you :slight_smile:

Hello,

You should be able to do it by replacing your code with this one:

.roll-project .project-item .project-pop-wrap {
  border: 2px solid red;
}

.roll-project .project-item:hover .project-pop-wrap {
    border: 2px solid yellow;
}

Best Regards!

Thank you very much :slight_smile: it worked perfectly.

Do you have an idea how to separate tiles from each other with a margin, for example, 5px?

I used this code:

.roll-project.fullwidth .project-item {
margin: 5px! important;
}

and it works, I just do not know if itโ€™s correct. I will be grateful for correcting whether I should use another one?

I do not know how to center the tiles horizontally. This code does not work. (In Page Bulider: Row Layout I set - โ€œStandardโ€ but it also did not change anything)

.roll-project.fullwidth .project-item {
text-align: center;
}

After searching the forum, I added something like this to center the project images (tiles):

.isotope-container {
margin: 0 10% 0 25%;
}
.roll-project.fullwidth .project-item {
width: 25.00%;
}

The result is that at smaller resolutions (1366 and 1280) the margins are too wide and the tiles too small, it seems to me that I made some mistakes here in percent.

Could someone kindly look at this code?

Hi again,

Portfolio items are already centered but if you add margin around them width of then each item will become wider then available width so 4th item will go below, and calculation is made by isotope script. I suggest you to remove code for the border and centering and to share a link to that page so I can inspect current state and to see if this change can be made successfully.

Best Regards!