Dropshadow to project pages and smaller pagination titles on mobile

jordanhansen · November 10

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!

SaranyaDesigns · November 10

@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 November 10 by SaranyaDesigns

jordanhansen · 2023-11-28T21:27:12Z

@SaranyaDesignsthat did the trick, thank you so much!!

Dropshadow to project pages and smaller pagination titles on mobile

Recommended Posts

jordanhansen

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

SaranyaDesigns

Link to comment

jordanhansen

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources