Jump to content

Add Colored Box Around Portfolio Links & Change Text Color

Recommended Posts

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
  • Replies 1
  • Views 797
  • Created
  • Last Reply

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.