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

Customization of Portfolio Section layout- Changing size of background images and adding title


ed0304

Question

Site URL: https://erickanigan.photography/portfolio-3#2

Hi-

I'm looking to modify the width/overall size of the background images on one of the portfolio pages I have. When I hover over the text, the images take up the entirety of the screen. Ideally I would like the margins/size of these images to be brought in and made smaller overall. Is there any way to customize the size of these images.

 

Additionally, I would like to add text above the three "projects" to denote "collections". Is there any way to add custom text that is different from the project titles?

 

Thank you for the help!

Eric

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

4 answers to this question

Recommended Posts

  • 0

Try the following code in custom CSS/code block:

.portfolio-hover-bg-img {
	width: 80%;
	height: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

You can reduce the percentage to reduce the size of the images even more. Or you can directly enter size in px. Mind it though, if you're using custom CSS, portfolio hover images across the site will be affected.

If you know a bit of CSS:

And you wish to add "Collections" above the project titles, you can do it by just creating a section above the portfolio and using text box to create the heading. Once you did that, publish the page. Use an extension called Squarespace collection/block identifier to find the id of the block. Use CSS margin property to appropriately align the text above the three project names as you wish.



 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
2 hours ago, aravsanj said:

Try the following code in custom CSS/code block:


.portfolio-hover-bg-img {
	width: 80%;
	height: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

You can reduce the percentage to reduce the size of the images even more. Or you can directly enter size in px. Mind it though, if you're using custom CSS, portfolio hover images across the site will be affected.

If you know a bit of CSS:

And you wish to add "Collections" above the project titles, you can do it by just creating a section above the portfolio and using text box to create the heading. Once you did that, publish the page. Use an extension called Squarespace collection/block identifier to find the id of the block. Use CSS margin property to appropriately align the text above the three project names as you wish.



 

Hi aravsanj-

 

Thanks for this- it looks to be working. Is there any way to add a margin from the top to space it a bit lower than the current border with the top section of the page?

 

Eric

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