Jump to content

Portfolio Image + Underline Alignment

Recommended Posts

Site URL: https://www.thelibertyproject.org/-portfolio

Hey! In the link provided, I would like to: 

1. Align the titles to the left side of the page 

2. Extend the horizontal line under each title across the width of the page (with the existing padding) 

3. Change the fixed position of the image on hover to the right side of the page 

4. Add a border radius to the image on hover so it has rounded corners. 

 

Thanks in advance for all your help, this community has been a game changer!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

#1. Use this CSS

/* Portfolio page hover - align left titles */
.portfolio-hover-items-list {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.portfolio-hover-items {
    align-items: flex-start !important;
}

#4. Use this CSS

.portfolio-hover-bg * {
    border-radius: 30px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

#2. Use this CSS

a.portfolio-hover-item {
    border-bottom: 2px solid currentColor;
    width: 100%;
}
.portfolio-hover-items-list {
    width: 100% !important;
}
.portfolio-hover-display {
    padding-left: 0;
    padding-right: 0;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.