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


Skyler1440

Question

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!

Link to comment

1 answer to this question

Recommended Posts

  • 0

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

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...