Add Colored Box Around Portfolio Links & Change Text Color

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

Hello!

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!

Hello,

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.

section[data-section-id="60ca314ce05af83b627d8fc9"]{
.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!

-Dan