Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add Colored Box Around Portfolio Links & Change Text Color



Site URL: https://www.rivalarchery.com/user-guides



I've added some user guides to my website for the products I sell, using a portfolio to organize them. I want to add a colored box around the text for each user guide to make it more clear that they are buttons. Ideally I'd like the boxes to have rounded corners. I would also like to know how to change the color of the text.


Thank you in advance for any advice!

Link to comment

1 answer to this question

Recommended Posts

  • 0


Try this code and tweak some of the settings to your liking. Border radius is your rounded corners, Color is your text color, and by changing the Display to Inline-Block we're able to adjust the width of the box. Without using an absolute measurement like (px), we'll end up with different sized boxes.

.portfolio-hover-item-content {
  display: inline-block !important;
  width: 300px;
  background: #000;
  border-radius: 15px;

.portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title {
  color: #fff !important;
  font-size: 2.5vmax;

On mobile devices you might encounter some sizing issues. Testing these fixes are a bit tricky when overriding the default settings but this might help.

@media only screen and (max-width:640px) {
.portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title {
font-size: 2.5vmax !important;

Hope this helps!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...