Jump to content

Dropshadow to project pages and smaller pagination titles on mobile

Go to solution Solved by SaranyaDesigns,

Recommended Posts

Hi! 

I have a portfolio page on a client website, and projects within that portfolio. I am trying to figure out how to add a drop shadow behind the images on the project pages themselves, but so far I haven't found anything that's worked. I have only been able to get a shadow on the portfolio page itself. 

The project titles are also somewhat long, so they overlap each other on mobile (image attached). Is there a way to resolve this with code?

Thank you!

#LDPrettyInPink — Las Vegas Interior Designer.jpeg

Link to comment
  • Solution

@jordanhansen try this in your custom CSS to fix the overlapping titles. You might have to play around with where you want the breakpoint to be, depending how long your titles are:

@media (max-width 950px) {
	.item-pagination--prev-next {
		flex-wrap: wrap;
		gap: 25px;
	}
	.item-pagination-link {
		max-width: 100% !important;
	}
}

and then for the box shadows, try this?

.gallery-grid-item img
{
	box-shadow: 5px 5px 30px #2b3652;
}

Let me know?

Edited by SaranyaDesigns
Link to comment
  • 3 weeks later...

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.